javascript - 从子组件reactjs更新状态

Question

我正在尝试优雅地重构组件，以便我们可以轻松地将组件用于相同的用例。

我有两个组件，

1. NewPurchaseOrder(父公司)
2. SelectWarehouse(子组件)

SelectWarehouse 组件将在 NewPurchaseOrder 组件中呈现可用仓库的下拉列表。

父组件有一个状态warehouseId来跟踪选定的仓库，从我正在执行此操作的子组件更新父组件状态(warehouseId)，

父组件

<SelectWarehouse
  updateTarget={ ( ghostValue ) => {
    this.setState( {
      warehouseId: ghostValue // updating the state from child comp. value
    }, () => {
      console.log( 'yokygoky', this.state.warehouseId )
    } )
  } }
/>

子组件

handleChangeWarehouse( e ) {
  this.setState( {
    selectedWarehouse: e.target.value
  }, () => {
    this.props.updateTarget( e.target.value ) // Updating the parent props
  } )
}

现在我想做的是仅从父组件发送状态名称，而不是发送函数，然后从子组件更新父组件的状态。 它看起来像这样，

<SelectWarehouse
  updateTarget={ warehouseId }
/>

然后从子组件更新warehouseId。

可能吗？

我通过仅发送状态进行了测试，但没有成功，而且也不可能仅使用简单状态绑定(bind)此上下文。

Answer 1

您的问题的简单答案是否。但为什么呢？

您所问的问题与 Angular 和 Vue.js 等框架中支持的双向绑定(bind)概念非常相似。这意味着数据将通过一个绑定(bind)从子组件流入和流出到父组件。 React 不支持这一点并且强烈反对使用这种方法。它总是更喜欢单向数据流。

因此，使用 React，您可以使用 props 轻松地从组件树的顶部到底部发送数据。但如果你想要反向重定向，从下到上，你唯一的选择就是回调。您可以将回调作为 prop 传递给子组件，当数据准备好时，它将使用相关数据调用回调。有时，当我们需要深度嵌套的组件之间进行通信时，这会很困难。因此，这就是您需要使用状态管理库(例如 Redux 或 React context)的地方。如果您不是经验丰富的开发人员，则不建议使用它。

为了更好地理解它，我建议您阅读 Thinking in React React 官方文档的部分。他们相信这种方法比神奇的双向绑定(bind)更容易理解程序的工作原理。

React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding.

另外，

Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

就您而言，可能您必须忍受它，重构为其他答案建议的不同格式或使用第三方库，例如 react-binding (我没用过，所以不推荐)。