Question

我们正在使用react，react-redux和react-router。在我的一个组件中，我使用react-router中的<Route>组件来呈现我的一个表单组件。提交表单并创建事件后，我希望我的父组件（其中包含<Route>组件的组件）重新呈现，以便我的事件列表将包含添加的事件。

render() {
    return (
        <div>
            <PublicEvents events={state.public}/>
            <PrivateEvents events={state.private}/>
            <Route component={Form}>
        </div>
     )
 }

如何更新这些状态属性以便在提交表单后重新呈现？我尝试将父组件和Form组件连接到商店并使用mapDispatchToProps，但不确定我是否应该这样做。我的reducer确实得到了新的事件，但我认为它不会更新我父组件的状态。

Answer 1

React Router是否允许您通过Route组件传递任意道具？ React中的标准范例是将onX个回调传递给子节点作为处理父节点中状态更改/事件的道具。

父组件中的

class Parent extends React.Component {
  onFormSubmit = () => {
    // update local state, here
  }

  render() {
    return (
      <div>
        ...
        <Route component={Form} onSubmit={this.onFormSubmit}/>
      </div>
    )
  }
}

然后在您的Form组件

中

class Form extends React.Component {
  onSubmit = (data) => {
    if (this.props.onSubmit) this.props.onSubmit(data)
    ...
  }
}

另一种选择是使用像redux这样的全局状态存储 - Form组件将更新商店，并且更改将反映在父级＆＃34;透明＆＃34; （根据redux如何运作的定义）

编辑：他们建议以下内容将道具传递给儿童：

<Route render={(props) => <Form {...props} onSubmit={this.onSubmit}/>} />

per：https://github.com/ReactTraining/react-router/issues/4105

从Routed组件更新父状态

1 个答案: