Question

我试图在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>
    );
  },
});

然而，这不起作用，因为虽然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

如果您只使用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 }

因此不显示详细信息行，除非它紧跟在show-detail项目之后。

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

Answer 2

在容器组件中包装OrderItem和OrderDetail，例如：OrderView。保持state是否在新OrderView中显示详细信息。在OrderView.render()中，选择是否根据状态显示详细信息行。不要试图致电open()，只需根据需要设置OrderView.state。

这tutorial对我帮助很大。

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

2 个答案: