Want to use a reference to a dynamically imported component in next js as below. How do I do this?
Given
// component1.jsx
export default class Component1 extends React.Component {
constructor(props) {
super(props)
}
render() {
return (<p>something</p>)
}
doSomething() {
console.log('should work')
}
}
And
// component2.jsx
import dynamic from 'next/dynamic'
const Component1 = dynamic(import('./component1'), {ssr: false})
class Component2 extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
componentDidMount() {
this.myRef.current.doSomething(); // This fails!
}
render() {
return (<Component1 ref={this.myRef}/>);
}
}
Already looked at https://github.com/vercel/next.js/issues/4957 and the solution there just doesn't work?
Related
I am trying to type a class component with no props
import React, { Component } from "react";
type Props = {};
class MyComponent extends Component<Props> {
constructor(props: Props) {
super(props);
this.state = { hasError: false };
}
render() {
return <h1>hello</h1>;
}
}
export default MyComponent;
It seems like I just cannot ommit them
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor() {
super();
this.state = { hasError: false };
}
What is the correct way to type a class component with no props?
You can initialize the state like this, avoiding to (manually) overwrite the constructor.
class ErrorBoundary extends Component {
state = {
hasError: false
}
render() {
return <h1>hello</h1>;
}
}
I think that's what you're talking about, not the typings.
so I'm having a little trouble using ref's with React.
All I'm trying to do is print the text content of an element using ref's like this:
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
console.log(this.intro.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
However, this always prints null or undefined instead of "Hi" which is what I want.
You should use current with ref, like this.ref.current.textContent
Check the stackblitz demo Here
export default class App extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
componentDidMount(){
console.log( this.intro.current.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
Its because you are logging it in constructor. Run the code in componentDidMount lifecyle.
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
componentDidMount(){
console.log(this.intro.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
You are console logging in the constructor before Dom is actually rendered.
Try console logging in an onClick handler instead.
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
print = () => {
console.log(this.intro.textContent);
}
render() {
return (
<div>
<div ref={this.intro}>Hi</div>
<button onClick={this.print}>Print</div>
</div>
)
}
}
So I am building my first react project and stumbled upon following problem:
In my App.js (main application) I got a function and render my components:
class App extends Component {
constructor(props) {
super(props);
this.candidateCounter = 0;
this.setCandidateVote = this.setCandidateVote.bind(this);
}
...
setCounter (name) {
this.candidateCounter++;
console.log(this.candidateCounter);
}
render() {
...
<Candidates setCounter={this.setCounter} />
}
}
The child component Candidates.jsx has another function and thus calls another component:
export class Candidates extends React.Component {
constructor(props) {
super(props);
this.AppProps = props;
}
...
registerVote(name) {
...
this.AppProps.setCounter(name);
}
render() {
...
<MyButton id={this.state.candidates[i].name} register={this.registerVote} />
}
And the last component MyButton.jsx looks like this:
export class MyButton extends React.Component {
constructor(props) {
super();
this.ParentProps = props;
this.state = { active: false }
}
buttonActiveHandler = () => {
this.setState({
active: !this.state.active
});
if (this.state.active === false) {
this.ParentProps.register(this.ParentProps.id);
}
else {
...
}
}
render() {
return (
<Button content='Click here' toggle active={this.state.active} onClick={this.buttonActiveHandler} />
);
}
}
I have successfully debugged that all functions calls are working except when the grandchild MyButton has triggered the registerVote() function in my Candidates module. Logging in this method gets printed but it cannot call this.AppProps.setCounter() from the parent App. I receive the following error:
TypeError: Cannot read property 'setCounter' of undefined
I hope this wasn't too complicated explained, any help is appreciated :)
Simply bind the function in the constructor of the class as #qasimalbaqali stated in his comment.
constructor(props) {
super();
this.registerVote = this.registerVote.bind(this);
}
Currently I am using reat creat app to build my appication in my application had three componentes those are com1, com2, com3 I want to update userId state value in com1 based on com3 will recive props here com2 is child component of com1.
Here is my sample code
import comp2 from './comp2.js';
class comp1 extends React.Component {
constructor(props) {
super(props);
this.state = {
userId:""
}
};
click() {
this.setSate({userId:"123"});
}
render() {
<div>Hello Child onClick={this.click}</>
<comp2 data={this.state.userId}
}
}
import comp3 from './comp3.js';
class comp2 extends React.Component {
constructor(props) {
super(props);
};
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.setState({userID:this.state.userId});
}
}
}
click() {
this.setState({userID:"456"})
}
render() {
<div>Hello Child onClick={this.click}</>
<comp3 data={this.state.userId}
}
}
class comp3 extends React.Component {
constructor(props) {
super(props);
};
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.setState({userID:this.state.userId});
}
}
render() {
<div>Hello Child onClick={this.click}</>
<comp3 data={this.state.userId}
}
}
You can use shared store between them or the parent dhould to manage data between children.
I'm mostly just curious what the significance of this pattern is. In almost every example I've looked at for using the flux architecture the getAppState() function is defined right above the react class definition. Why? Why is it not a function of the component?
So why is this:
import React from 'react';
getAppState = () => {
return {
something: SomeStore.getState()
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = getAppState();
}
}
Better than this:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = this.getAppState();
}
getAppState() {
return {
something: SomeStore.getState()
}
}
}
And what if I'm wanting to pass arguments from this.props into the getAppState() function?