Question

好的，假设我有一个类似的组件：

由2个不同的组件组成：

1）整个矩形（我们称其为card）

2）每边（正方形）是另一个组件（我们称之为cardSide）

我在card上添加了一个按钮，单击该按钮可收集关于cardSide每个组件（文本，注释，图像等）的所有信息。

我的问题是，我该如何实现？我已经读过有关passing refs from parent to children和sending props from parent to children的信息，但没有找到相反getting the props/states from children components的任何示例。

我对React没有太多经验，我在Java中使用钩子和函数来代替类（以防万一），这很容易通过访问get methods of each instance来实现，如何在React中完成？。

Answer 1

请参阅以下网址：Call child method from parent。并阅读迷迭香的答案。

似乎“ 使用类组件（> = react@16.4）”部分对您更有用。

Answer 2

您将需要在设置状态的父容器中创建一个函数/方法。从那里，您可以将其传递到子组件，该子组件将能够设置其父组件的状态。

Answer 3

为了实现这种交流，我建议孩子（ CardSide组件）通过事件与 Card组件进行通信。

因此，当用户完成对卡组件的操作时，会触发一个事件，将所有数据传递给父代，让我为您展示我的意思的示例：

卡组件

class Card extends Component {
  handleCompelete = data => {
    //the data here are all the data entered from the child component
    //do some sorting using table name
  };

  render() {
    return <CardSide onCompelete={this.handleCompelete} />;
  }
}

CardSide组件

class CardComponent extends Component {
  render() {
    return (
      <div>
         {/* data here reprensets what you need to transfer to parent component */}
        <button onClick={() => this.props.onCompelete(data)} />
      </div>
    );
  }
}

修改

您无法访问子组件的状态，因为它是私有的。

关于道具，您可以访问它，但它是从父组件传递来的 ReadOnly ，但是子组件不能对其进行修改。

实际上，有一种方法可以访问子组件（但我认为它将使您的代码复杂而不是简化它，我不建议这样做）

让我们说这就是您app.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <h1>Title</h1>
        <Card>
          <CardSide someProp="My Child Prop Value" />
        </Card>
      </div>
    );
  }
}

如您所见，我将 CardSide 包含为属性 someProp 的财产，作为 Card 盗窃罪的孩子，而不是将其插入 Card组件

在卡组件中，我按以下方式访问children属性：

class Card extends Component {
  handleCompelete = data => {
    //the data here are all the data entered from the child component
    //do some sorting using table name
  };

  render() {
    return <div>
     {this.props.children}
     {console.log(this.props.children)}
     {this.props.children.props.someProp}
    </div>;
  }
}

和CardSide组件

class CardSide extends Component {
  render() {
    return (
      <div>
         {/* data here reprensets what you need to transfer to parent component */}
        <button onClick={() => this.props.onCompelete(data)} >
        Hello btn
        </button>
      </div>
    );
  }
}

如您所见，如果不进行深入跟踪，就会使您的结构更加复杂，并且很难知道谁是卡组件的子代。

您可以通过此链接https://stackblitz.com/edit/react-fxuufw?file=CardSide.jsx

查看运行中的代码

反应，如何从子组件加载状态/属性

3 个答案: