Question

我的例子是一个简单的订单。我有一个主要组件（Order），在这个组件中，我呈现了子组件的动态列表（OrderLine）

class Order extends React.Component {
  ...
  render() {
    return <div>
      <strong>Total: $ {this.getTotal()}</strong>
      <table id='orderlines' style={tableStyles}>
        <tbody>
          {this.getLines()}
        </tbody>
      </table>
    </div>
  }

  getLines = () => {
    return this.state.orderLines.map((item, _) =>
      <OrderLine key={item.id} {...item} />)
  }
}

子组件（OrderLine）有输入（quantity）和方法getTotal()，用于计算此行的总和

getTotal = () => (this.props.product.price * this.state.quantity).toFixed(2);

目标是计算订单的总和。

我想执行sum(map(allOrderLines, (line) => line.getTotal()))之类的操作但我无法从orderLine.getTotal()组件访问Order。

那么，最好的方法是什么？我知道如何从孩子那里更新父亲的状态（给回调函数作为道具），但是可以从父母那里做到吗？

此处的完整示例：

Answer 1

将ref实例附加到您的订单行并调用函数

response.getWriter().write(errorMsg)

Answer 2

您可以将ref这样添加到order line

getLines = () => {
return this.state.orderLines.map((item, _) =>
  <OrderLine 
  ref={instance => this.myOrder = instance}
    key={item.id} 
    updateCallback={this.updateTotal}
    {...item} 
  />)

现在您可以通过OrderLine

访问this.myOrder的方法了

Answer 3

我认为最简单的选择是将getTotal移动到父Order组件中，并将其作为prop传递给每个OrderLine。然后，两个组件都可以访问该实用程序功能。

Order.js

render() {
    const { id, product } = this.props;
    return (
      <tr key={id}>
        ...
        <td>
          {this.props.getTotal(this.props.product.price, this.state.quantity)}
        </td>
      </tr>
    );
  }

OrderLine.js

  updateTotal = () => {
    // You'll need a way to get the product price and quantity for each order line
    let total = this.state.orderLines.reduce((sum, line) => {
      sum = sum + this.getTotal(line.product.price, line.quantity);
    }, 0);

    this.setState({ total });
  };

ReactJS。如何从父组件调用组件的方法

3 个答案: