javascript - ReactJS 中相邻元素之间如何通信？

Question

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

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

现在我的方法是生成行并将 row(n+1) 作为 row 的 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 元素上的方法。所以我的做法显然是错误的。

目前，这是我在 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

如果您只是使用 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 组件只关心切换自身的类，而不是与它的同级组件通信。