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

Posted 2023-02-25

【中文标题】将数据从孩子传递给祖父母

【英文标题】：passing data from child to grandparent

【发布时间】：2018-04-28 16:18:18

【问题描述】：

我是 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>
    );
  

我在这里做错了什么？

【参考方案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 组件在 counter 属性中向下传递当前状态，并让 Child 组件通过调用它作为属性接收的 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 对其进行更新。需要注意的是，Grandparent 不知道 Child，只知道 Parent。

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 中使用removed。

您还应该将在 props 中传递的函数命名为 data 以外的名称。函数名通常是动词。

您的代码不止一个问题，所以我希望这能回答您的问题。

【讨论】：

@usuario128216 虽然是老入口，但你救了我！非常感谢