如何在React

Question

目前我正在使用reat creat app在我的应用程序中构建我的应用程序有三个组件，即com1，com2，com3我想基于com3更新com1中的userId状态值将在此处重现道具com2是com1的子组件。

这是我的示例代码

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}
    }
}

Answer 1

您可以在它们之间使用共享存储，或者父级可以管理子级之间的数据。