如何将此子组件的状态传递给父组件？

Question

我有 2 个组件 OptinPage（父）和 TermsOfServices（子）。Optin Page 仅用于渲染 TermsOfServices 组件，可以在应用程序的其他地方重用。我想在我的 OptinPage 组件中使用我的 TermsOfServices 组件的状态来显示条件页面的数量（1/2、2/2）。如果没有 Redux，我怎么能做到这一点？

Answer 1

请尝试这种方法

class OptIn extends Component{

   state = {}

   receiveChildState = (childState) => {

       console.log(childState)

   }

   render(){

      return(

          <TermsOfService receiveChildState={this.receiveChildState}/>

      );

   }

}

class TermsOfService extends Component{

  state = {

     x: 1

  }

  updateState = () => {

     const {x} = this.state;

     const {receiveChildState} = this.props;

     this.setState({x: x+1});

     receiveChildState(x+1);

  }

   render(){

      return(

          <button onClick={this.updateState}> Terms of service </button>

      );

   }

}

Answer 2

1. 在父组件中创建状态。

2. 另外，创建一个可以更改创建状态的函数。

3. 将此函数传递给子组件。

4. 在您的子组件中，您可以使用此函数来更改父状态。