反应：当父状态是从作为父级属性的外部类中获取和修改时，将父状态传递给子级

Question

I'm not sure how to exactly word it out on the title, since the problem is way too specific in my scenario, but anyway basically I have two external classes similar to below:

class Config {
    public level: number = 1; //this is a sample state I want to pass

    //sets level
    public setLevel(level: number){
        this.level = level;
    }
}

//wrapper class that uses Config class as a property
class Manager {
    public config: Config = new Config();

    //invokes Config.setLevel() here, but wrapped
    public nextLevel(level: number){
        this.config.setLevel(level)
    }
}

And then my react components are:

//here is my parent component using Manager
class ParentComp extends React.Component<any, any>{
    public mngr: Manager = new Manager(); //uses Manager as a property

    constructor(props: any){
        super(props);

        this.state = { config: this.mngr.config }; //adds the Manager instance's property as a state
    }

    public render(){
        //passes the state to a child component
        return(
            <div> <ChildComp level={this.state.config.level}/> </div>
        )
    }

    //this is where I simulate changing the level property using the external class(es)
   componentDidMount(){
        setTimeout(()=>{
           this.mngr.nextLevel(2); //invoke external class method that changes the source object
           console.log('1 sec has passed and a new level has been set.')
        }, 1000)
    }
}

class ChildComp extends React.Component<any, any>{
    constructor(props: any){
        super(props);
        this.state = {level: props.level} //uses the prop to the child's state
    }
}

componentDidMount on ParentComp does change ParentComp.config.level , based on the React dev tools, but not ChildComp.level .

Why and what to do? I am coming from a Vue background and usually Vue automatically handles these things. I don't understand why it isn't working for React.

Answer 1

您没有在实现中使用setState属性，这就是为什么没有更改的原因。

Answer 2

You never actually call setState() which is a trigger to get the component to re-render, so the Child component would never receive updated props in this scenario. Thus, no changes are reflected.

You might be able to just trigger a re-render with the updated config value, assuming it is actually updated via this.mgr.nextLevel(2)

public componentDidMount(){
    setTimeout(()=>{
       this.mngr.nextLevel(2); //invoke external class method that changes the source object
       this.setState({
          config: this.state.config
       })
    }, 1000)
}

In reference from comments, you can also trigger a state-update in the child-component to reflect these changes.

In ChildComp.js write the following:

public componentDidUpdate(prevProps){
   if(prevProps.level !== this.props.level){
      this.setState({
         level: this.props.level
      })
   }
}

Do I really have to keep explicitly calling setState() every time I want a React component to react to object changes? Doesn't it automatically bind stuff on the constructor when I did this.state = {config: this.mngr.config} ?

Yes, you do have to call setState() every time you want the component to reflect some UI change. Doesn't matter if the change is done implicitly or not, the component will not display those changes unless you call the aforementioned method.