Question

我有一个父组件，其中包含一个函数，在调用该函数时需要访问子组件的状态。我不想将整个状态移到父组件，因为我希望子组件是独立的。什么是最干净，最推荐的方法？

class ParentComponent extends Component {

render() {

return (
    <div>
        <ChildComponent/>
        <SaveButton onClick={this.saveFunction}/>
    </div>
)
}

saveFunction = () => {
    //Here i need to acces the child Component state
}
}

到目前为止，我的解决方案是子组件中的每次更改都会调用一个从父组件传递的函数。像这样：

class ChildrenComponent extends Component {

    state = {
        name: "David",
        age: 19
    }

    render() {

        return (
            //inputs with the inputChange function
        )
    }   

    inputChange = (e) => {
        //Update the state
        //Then pass the state to the parent
        this.props.passStateToParent(this.state)
    }
}

Answer 1

您可以在父组件中创建一个函数，并将其作为prop传递给子组件。此功能可以将子组件的状态返回到父组件。在此处查看更多信息：https://reactjs.org/docs/faq-functions.html

Answer 2

您不能直接访问子组件的状态，这可以通过将状态传递给父组件的方法来实现，这些方法作为道具传递给子组件，下面的示例演示了如何做到这一点。

class ParentComponent extends React.Component {
      somefunc() {
         //do your action
           }
      render() {
         <ChildComponent parentfunc={this.somefunc}/>   
}
}
class ChildComponent extends React.Component {
      constructor(props){
          super(props)
          this.state = {somedate:'value'}
          this.func = this.func.bind(this)
}
      func() {
       this.props.parentfunc(this.state)
}
      render() {
       <button onClick={this.func}>text</button>
}

}

Answer 3

我建议您查找一些React模式-特别是Render Props，因为它允许公开组件的状态和所需的方法-在这种情况下所需的内容。

祝你好运！

评估子组件的状态

3 个答案: