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

Question

我正在尝试在 ReactJS 中构建一个表，该表为数组中的每个元素生成两行。我无法解决的问题是以行（n）可以向行（n+1）发送消息的方式生成它们。

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

现在我的方法是生成行并将 row(n+1) 作为行的 prop 传递。

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

但是这不起作用，因为当 prop 成功通过时，我不知道如何访问 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");
  }
});

我对使用 Orders 类的状态的想法持开放态度，但我不禁觉得这太过分了。

Answer 1

将OrderItem 和OrderDetail 包装在一个容器组件中，例如：OrderView。在新的OrderView 中保留是否显示详细信息的state。在您的OrderView.render() 中，根据状态选择是否显示详细信息行。无需尝试调用open()，只需根据需要设置OrderView.state。

这个tutorial真的帮了我很多。

Answer 2

如果您只是使用 CSS 来显示/不显示详细信息行，除非它前面有具有特定类的行。

所以，你的 DOM 可能看起来像

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

您的 CSS 可能类似于

.detail-row { display: none}
.show-detail + .detail-row { display: block }

所以不会显示详细信息行，除非它紧跟在显示详细信息项之后。

然后，您的 OrderItem 组件只担心在其自身上切换一个类，而不是与它的兄弟姐妹交谈。