Question

在我的nextJS应用中，我想将一个组件的道具传递给另一个既不是第一个组件的父代又不是子组件的道具，该怎么办呢？

Order页面的div内有一个Orders组件，另一个div的OrderViewer中有一个orderno组件。我想要的是，当我单击“查看订单”按钮时，{{1 }}的顺序应传递给OrderViewer组件。

orders.js

<div>
   <div><Order 
     orderno='abc'
 title='abc'
 status='abc'
 entity='abc'
 po='abc'
 duedate='abc' /></div>
</div>
<div><OrderViewer /></div>

Order.js

<div>
<button>View Order</button>
    <p><span>{this.props.orderno}</span> 
    <span>{this.props.title}</span></p>
    <p>{this.props.entity} - {this.props.po}</p>
    <p>Due {this.props.duedate}</p>
</div>

OrderViewer.js

<div>//should display the orderno of clicked `order`</div>

orderno通过后，Orderviewer就会显示它。我在这里看到了这么多“通过道具”问题，但是都没有这种情况。任何提示都值得赞赏。 / p>

Answer 1

在您的情况下，您需要处理回调。回调是响应中的一个概念。

在orders.js中声明一个事件处理函数，该函数将orderId设置为在单击orders.js组件中单击按钮时的状态，并将该事件处理函数作为prop传递给Order组件，并将orderId作为prop传递给OrderViewer组件。 / p>

orders.js

  constructor(props){
      super(props);
      this.state = {
           orderId: null
      }
  }
  handleViewOrder = orderId = {
      this.setState({
          orderId
      });
  }
  render(){
    return(<div>
     <div><Order 
       orderno='abc'
       title='abc'
      status='abc'
      entity='abc'
      po='abc'
      duedate='abc' handleViewOrder={this.handleViewOrder} /></div>
  </div>
  <div><OrderViewer orderId={this.state.orderId} /></div>)}

现在，order.js使用prop访问接收到的处理程序函数，并通过传递orderId将其分配给按钮onClick

   <div>
      <button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>
      <p><span>{this.props.orderno}</span> 
     <span>{this.props.title}</span></p>
     <p>{this.props.entity} - {this.props.po}</p>
     <p>Due {this.props.duedate}</p>
 </div>

现在，您可以在OrderViewer组件中使用this.props.orderId访问orderId并显示

OrderViewer.js

   <div>{this.props.orderId}</div>

因此在父组件中具有事件处理程序功能，并作为道具传递给子组件，并分配给子组件按钮onClick，并且在单击时更改父状态称为响应中的回调。如果您了解我要在回答中解释的内容，那么您可以轻松进行

编辑：

在Order.js组件中

更改

  <button onClick={() => this.handleViewOrder(this.props.orderno)}>View Order</button>

收件人

   <button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>

另外，您正在循环调用Order组件，但没有为Order组件设置唯一键，所以

更改

            { Orders.map((order) => <Order 
                 orderno={order.orderno}
            title={order.title}
                 status={order.status}
                entity={order.entity}
                po={order.po}
            duedate={order.duedate}
            handleViewOrder={this.handleViewOrder}/> )}

收件人

            { Orders.map((order) => <Order 
            orderno={order.orderno}
            title={order.title}
            status={order.status}
                entity={order.entity}
            po={order.po}
                            key={order.orderno}
            duedate={order.duedate}
            handleViewOrder={this.handleViewOrder}/> )}

Answer 2

所以，推理是：

您有一些父组件/屏幕。让我们称之为OrdersPage
在OrdersPage中，您有2个组成部分：Order和OrdersViewer
在父组件（OrdersPage）的上下文中，您感兴趣的是要知道单击了哪个顺序并在其他子项中显示该顺序
显然，您需要在state组件上使用OrdersPage
点击某些订单时，您会将其置于状态
您的其他组件将收到state作为props并显示单击的组件

单击按钮即可将道具传递到另一个组件

2 个答案: