Javascript 如何在ReactJS中的相邻元素之间进行通信？

我试图在ReactJS中构造一个表，为数组中的每个元素生成两行。我在解决问题时遇到的问题是，生成它们时，行（n）可以向行（n+1）发送消息

如果单击其中一行，则应用程序将打开详细视图

现在我的方法是生成行并将行（n+1）作为行的一个属性传递

const orders = [
  // this is just some example data
  {
   "name": "lorem",
   "number": "20.00",
   "price": "20.00",
   "image": "http://localhost/path/to/image1.jpg"
  },
  {
   "name": "lorem",
   "number": "20.00",
   "price": "20.00",
   "image": "http://localhost/path/to/image1.jpg"
  },
];

const Orders = React.createClass({

  renderAllRows(order) {
    // this function would generate all the rows of the table
    const rows = [];
    orders.map(function (order, index) {
      const OrderDetailInstance = <OrderDetail display={false}  item={order} />
      // OrderDetailInstance is passed as a prop of OrderItemInstance
      const OrderItemInstance = <OrderItem detail={OrderDetailInstance} item={order}/>;
      rows.push(OrderItemInstance, OrderDetailInstance);
    });
    return rows;
  },

  render() {
    const { state } = this;
    const { orders } = state;
    const { isLastPage } = state;

    return (
        <Table>
          <tbody>
            {this.renderAllRows(orders).map(function(row) {
               return row;
            })}
          </tbody>
        </Table>
    );
  },
});

const orders=[
//这只是一些示例数据
{
“名称”：“lorem”，
“编号”：“20.00”，
“价格”：“20.00”，
“图像”：http://localhost/path/to/image1.jpg"
},
{
“名称”：“lorem”，
“编号”：“20.00”，
“价格”：“20.00”，
“图像”：http://localhost/path/to/image1.jpg"
},
];
const Orders=React.createClass({
renderAllRows（订单）{
//此函数将生成表中的所有行
常量行=[]；
orders.map（函数（顺序、索引）{
常量OrderDetailInstance=
//OrderDetailInstance作为OrderItemInstance的道具传递
const OrderItemInstance=；
rows.push（OrderItemInstance、OrderDetailInstance）；
});
返回行；
},
render（）{
const{state}=这个；
const{orders}=状态；
const{isLastPage}=状态；
返回(
{this.renderAllRows（orders）.map（函数（row）{
返回行；
})}
);
},
});

但是，这不起作用，因为当道具成功通过时，我不知道如何访问react元素上的方法。所以我显然是做错了

目前，这是我在react元素上调用方法的失败方法

const OrderItem = React.createClass({
  render() {
    const item = this.props.item;


    return (
      <tr>
        <td>{item.number}</td>
        <td>{item.number}</td>
        <td>
          <a onClick={this.openOrderDetail}>open detail</a>
        </td>
      </tr>
    );
  },

  openOrderDetail() {
    // This is where I'm trying to call the prop's method.
    this.props.detail.open();
  }
});

const OrderDetail = React.createClass({
  render() {
    const display = this.props.display;
    const classes = display ? classNames('') : classNames('hidden');
    return (
      <tr className={classes}>
        <td colSpan="3">
          <div>
            This is the detail of the previous row
          </div>
        </td>
      </tr>
    );
  },

  open() {
    // This should IDEALLY be exposed to any react element that has
    // OrderDetail as a prop.
    console.log("open");
  }
});

const OrderItem=React.createClass({
render（）{
const item=this.props.item；
返回(
{item.number}
{item.number}
公开细节
);
},
openOrderDetail（）{
//这就是我试图调用道具的方法的地方。
this.props.detail.open（）；
}
});
const OrderDetail=React.createClass({
render（）{
const display=this.props.display；
const classes=display？类名（“”）：类名（'hidden'）；
返回(
这是上一行的详细信息
);
},
开（）{
//理想情况下，应将其暴露于任何具有
//订单细节作为道具。
控制台日志（“打开”）；
}
});

---

我愿意使用

Orders

类的状态，但我忍不住觉得这样做太过分了。

如果您只是使用CSS显示/不显示细节行，除非它前面有一个带有特定类的行，该怎么办

所以，你的DOM看起来像

<table>
  <!-- Item -->
  <tr class='show-detail'></tr>
  <!-- Detail -->
  <tr class='detail-row'></tr>
</table>

因此不会显示详细信息行，除非它紧跟在“显示详细信息”项目之后

---

然后，您的OrderItem组件只担心在自身上切换一个类，而不是与它的同级进行对话

如果您只是使用CSS显示/不显示细节行，除非它前面有一个带有特定类的行，该怎么办

所以，你的DOM看起来像

<table>
  <!-- Item -->
  <tr class='show-detail'></tr>
  <!-- Detail -->
  <tr class='detail-row'></tr>
</table>

因此不会显示详细信息行，除非它紧跟在“显示详细信息”项目之后

---

然后，您的OrderItem组件只担心在自身上切换一个类，而不是与它的同级进行对话

在容器组件中包装

OrderItem

和

OrderDetail

，例如：

OrderView

。保留是否在新的

订单视图中显示详细信息的
状态
。在您的
OrderView.render（）
中，选择是否基于状态显示详细信息行。不要试图调用
open（）
，只需根据需要设置
OrderView.state

这真的帮了我很大的忙。
将
OrderItem
和
OrderDetail
包装到容器组件中，比如：
OrderView
。保留是否在新的
订单视图中显示详细信息的
状态
。在您的
OrderView.render（）
中，选择是否基于状态显示详细信息行。不要试图调用
open（）
，只需根据需要设置
OrderView.state

这真的帮了我很大的忙。
为长代码示例道歉，我知道这不是必需的，但有时上下文是有用的：-）为长代码示例道歉，我知道这不是必需的，但有时上下文是有用的：-）为长代码示例道歉，我知道这不是必要的，但有时上下文是有用的：-嘿，谢谢你的答案：-我会考虑一个解决我目前的问题在我目前的领域。但不是这个问题，因为它不能解决如何在相邻元素之间通信。嘿，谢谢你的答案：-我会考虑一个解决我目前的问题在我目前的领域。但不是这个问题，因为它不能解决如何在相邻元素之间通信。嘿，谢谢你的答案：-我会考虑一个解决我目前的问题在我目前的领域。但这个问题并没有解决，因为它不能解决相邻元素之间如何通信的问题。