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

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

在您的情况下，您有三个嵌套组件，每个组件都有自己的状态。通常，只有父母＆＃34;容器＆＃34;组件将具有状态，子组件将是无状态的。因此，让我们从Child和Parent组件中删除状态。 Child组件通过按钮与用户交互，因此每当按下按钮时，都会调用事件处理程序，并使用回调将数据向上流动到树中。我添加了一些边框和填充以使嵌套清晰：

部分问题在于按钮上的onClick处理程序。事件处理程序应该是函数引用，但您使用了函数调用。所以你的孩子可能就像下面一样。请注意接收当前状态的counter道具，以及允许Child更新Parent的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组件在counter prop中传递当前状态，并让Child组件通过调用它作为prop获得的updateParent回调来改变状态：

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

您应避免在未来版本的React中使用componentWillMount，因为它将是removed。

您还应该使用除data之外的其他东西命名您传递的功能。函数名称通常是动词。

您的代码有多个问题，所以我希望这能回答您的问题。

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

1 个答案: