Reactjs 如何在react中的两个sibling之间传递数组

在我的项目中，App.js是父组件。对于父组件，有两个子组件，即Childone组件和Childtwo组件。现在我尝试将数据从Childone组件传递到Childtwo组件。有人请告诉我要做到这一点

这是App.js

import React, { Component } from "react";
import Childone from "./Childone/Childone";
import Childtwo from "./Childtwo/Childtwo";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Childone />
        <Childtwo />
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/Childone/Childone”导入Childone；
从“/Childtwo/Childtwo”导入Childtwo；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这是Childone

import React, { Component } from "react";

class Childone extends Component {
  render() {
    const Employs = ["Mark", "Tom"];
    return <div className="Childone" />;
  }
}

export default Childone;

import React，{Component}来自“React”；
类Childone扩展组件{
render（）{
常数=[“马克”，“汤姆”]；
返回；
}
}
导出默认Childone；

这是第二个孩子

import React, { Component } from "react";

class Childtwo extends Component {
  render() {
    return <div className="Childtwo" />;
  }
}

export default Childtwo;

import React，{Component}来自“React”；
类Childtwo扩展组件{
render（）{
返回；
}
}
导出默认值2；

---

如果您觉得我不清楚我的疑问，请发表评论。

您熟悉React的单向数据流吗？我会尝试在你的头脑中建立一个心理模型，让父母成为容器/控制者，将所需信息传递给你的孩子

---

因此，在这种情况下，您可能希望数据来源于

父项

，或者在

Child1

中有一些与数据关联的事件处理程序。如果是后者，请将一个回调函数从

Parent

附加到

Child1

，该函数接受数据作为参数，然后传递到

Child2
最佳解决方案是使用redux。如果您不熟悉redux，则可以采用以下方法：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      number:[0] 
    };
  }

  render() {
    return(
      <div>
        <div>Parent Componet</div>
        <Child1 passToChild={this.passToChild.bind(this)}> </Child1>
        <Child2 number={this.state.number}></Child2>
      </div>
    )
  }

  passToChild(number){
    this.setState({
      number : [...this.state.number,number]
    });
  }
}

class Child1 extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <div>Child1</div>
        <button onClick={() => this.sendToSibiling()}>
          Send data to sibiling
        </button>
      </div>
    );
  }

  sendToSibiling() {
    this.props.passToChild(Math.random());
  }
}
class Child2 extends Component {
  constructor(props) {
    super(props);
  }
  render(){
    return(
      <div>
        <div>Child 2</div>
        <span>data from sibiling : {...this.props.number}</span>
      </div>

    )
  }
}

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
编号：[0]
};
}
render（）{
返回(
父组件
)
}
学生（人数）{
这是我的国家({
编号：[…此.状态.编号，编号]
});
}
}
类Child1扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
孩子1
this.sendToSibiling（）}>
将数据发送到sibling
);
}
sendtosibling（）{
this.props.passToChild（Math.random（））；
}
}
类Child2扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
儿童2
来自sibling的数据：{…this.props.number}
)
}
}
有两种方法

通过回调将数据从Childone传递给Parent，并将数据从Parent传递给Childtwo。从而让父母成为中间人

通过在家长处创建上下文，让Childone成为制作人和Childtwo成为消费者

上下文用于避免支柱钻孔。此外，频繁更新上下文值也不是一个好的做法。
此外，对于您的情况，我们可以使用方法（1）

您可以在Childone中输入数据，并在中查看Childtwo中反映的数据。
正如ehutchllew所建议的，使用包含Childone和Childtwo的容器。ChildOne通过容器（useState）传递的回调设置值。然后容器将该值传递给ChildTwo。我不同意。对于这样一个微不足道的例子来说，Redux是不必要的。