在您的情况下，您需要处理回调。回调是react中的一个概念。
在 orders.js 中声明一个事件处理函数，它将 orderId 设置为在 orders.js 组件中单击按钮时的状态，并将该事件处理函数作为props传递给 Order 组件，并将 orderId 作为props传递给 OrderViewer 组件
订单.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 中使用 props 访问接收到的处理函数，并通过传递 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 并显示它
订单查看器.js
<div>{this.props.orderId}</div>
因此，在父组件中有一个事件处理函数，并将其作为props传递给子组件并分配给子组件按钮 onClick 和单击时更改父状态，这就是所谓的react中的回调。如果您理解我在回答中要解释的内容，您就可以轻松开始
编辑：
在 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}/> )}