将数据从孩子传递到祖父母

Question

我是React的新手，仍然在学习。我正在尝试将数据从孩子传递给祖父母。到目前为止，我和父母接触，被困住了。

子组件：

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counterChild: 5
    }
  }

  render() {
    return(
      <div>
        <span>Child: {this.state.counterChild}</span><br />
        <button onClick={this.props.data(this.state.counterChild)}>Click me</button>
      </div>
    );
  }
}

父组件：

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counterParent: 0
    }
  }

  updateParent(value) {
    return() => {
      this.setState({
        counterParent: value
      });
    }
  }

  componentWillMount(){
    this.props.data(this.state.counterParent) 
  }

  render(){
    return(
      <div>
        <span>Parent: {this.state.counterParent}</span>
        <Child data={this.updateParent.bind(this)}/>
      </div>
    );
  }
}

在子组件中，我使用按钮，在这里我想我必须使用componentWillMount才能发送给祖父母..但它没有达到

祖父母组件：

export default class Grandparent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      counterGrandparent: 0
    }
  }

  updateGrandparent(value){
    return() => {
      this.setState({
        counterGrandparent: value
      });
    }
  }

  render(){
    return(
      <div>
        <span>Grandparent: {this.state.counterGrandparent}</span>
        <Parent data={this.updateGrandparent.bind(this)}/>
      </div>
    );
  }
}

我在这里做错了什么？

Answer 1

您可能已经知道，数据以props的形式向下传递到组件树，并以prop回调函数的形式向上传递。当孩子发生某些事情时，您可以调用回调函数通知父母。父母然后更新其状态并将新状态作为道具传递给孩子。

对于您的情况，您有三个嵌套的组件，每个组件都有各自的状态。通常，只有父“容器”组件将具有状态，而子组件将是无状态的。因此，让我们从子组件和父组件中删除状态。Child组件通过按钮与用户交互，因此每按一次按钮，都会调用事件处理程序，并且数据使用回调在树上向上流动。我添加了一些边框和填充以使嵌套清晰可见：

问题的一部分在于onClick按钮上的处理程序。事件处理程序应该是函数引用，但是您已经使用了函数调用。因此，您的孩子可能像下面这样。请注意counter接收当前状态的updateParent道具，以及允许孩子更新父母的道具。

import React from 'react';

const boxStyle = {
    border: '1px solid red',
    padding: '5px'
};

export class ChildWithButton extends React.Component {
    handleClick(event) {
        this.props.updateParent(this.props.counter + 1);
    }
    render() {
        return(
            <div style={boxStyle}>
                <div>Child: {this.props.counter}</div>
                <button onClick={this.handleClick.bind(this)}>
                    Add 1
                </button>
            </div>
          );
    }
}

Parent组件将当前状态传递到counterprop中，并让Child组件通过调用updateParent作为prop收到的回调来更改状态：

export class Parent extends React.Component{
    updateParent(value) {
        this.props.updateGrandparent(value);
    }
    render() {
        return(
            <div style={boxStyle}>
                <div>Parent: {this.props.counter}</div>
                <ChildWithButton
                    counter={this.props.counter}
                    updateParent={this.updateParent.bind(this)} />
            </div>
        );
    }
}

祖父母组件保留状态，将其向下传递给父级，counter并允许其使用进行更新updateGrandparent。应当指出，祖父母不了解孩子，只有父母。

export default class Grandparent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {counter: 5};
    }
    updateGrandparent(value){
        this.setState({counter: value});
    }
    render() {
        return (
            <div style={boxStyle}>
                <div>Grandparent: {this.state.counter}</div>
                <Parent
                    counter={this.state.counter}
                    updateGrandparent={this.updateGrandparent.bind(this)} />
            </div>
        );
    }
}

您应该避免使用componentWillMount它，因为它将在以后的React版本中删除。

您还应该在props中命名传递给您的函数，而不是data。函数名称通常是动词。

您的代码有很多错误，所以我希望这可以回答您的问题。