reactjs - 获取 child 的默认 Prop 以在 ReactJS 中设置 parent 的状态

Question

类似于Pass props to parent component in React.js但我只对将子组件的 default 属性放入父组件感兴趣。

那么我为什么需要这样做呢？

好吧，我有一个父组件，它呈现一个包含 HTML 表单的子组件。父级的 render() 方法将其状态数据作为 props 传递给子级，这是它应该做的。

最初，子表单应该只包含一些默认数据。从子组件中定义的 defaultProps 中获取数据是有意义的。毕竟，我不想为了将其作为默认 Prop 传递给 child 而在父状态中设置默认数据负载。 parent 不需要定义 child 的默认 Prop 。 child 应该知道自己的默认 Prop 是什么。

所以在我的初始父 render() 中，我将我的状态保留为未定义。当它作为未定义的 Prop 传递给 child 时， child 将使用其 defaultProps 代替。这正是我想要的。

时间流逝...

现在用户更改子组件表单上的字段。我通过回调函数将该更改传回父级，以便它重新计算父级的新状态。然后，我在父组件中调用 setState() 以正常重新渲染所有子组件。

问题是我需要我 parent 的状态是一个对象，包含更多的嵌套对象，并且我正在使用 [React Immutability Helpers][1] 来计算 parent 的新状态，如下所示:

handleFormFieldChange(e) {
// reactUpdate imported from 'react-addons-update'
 var newState = reactUpdate(this.state, {
    formData: {values: {formFieldValues: {[e.currentTarget.name]: {$set: e.currentTarget.value}}}}
    });
    this.setState(newState);
}

此代码第一次运行时会抛出错误，因为它正在尝试更新状态值，但没有要更新的状态。 (我没有定义它，记住!)

如果我试图通过将默认初始状态设置为一个空对象(每个对象都有嵌套的空对象)来解决这个问题，我就会遇到第 22 条军规。在第一次渲染时，这些空值将作为空 props 传递给子组件，从而覆盖我为子组件设置的 defaultProps。真可惜!

据我所知，我需要一个合理的初始状态传递给子组件，但不需要在父组件中再次(重新)定义整个组件。所以在这种情况下，我认为将 child 的 defaultProps 拉入父级是有意义的，只是为了设置父级的初始状态。

我有一个方法可以做到这一点，稍后我会发布。但在我这样做之前，有人有更好的方法吗？一种可以完全避免将 defaultProps 从子级传递给父级的方法？

Answer 1

如果您使用的是 React.Component，那么 defaultProps 是类中的静态对象，因此很容易获取。

export default class Child extends React.Component {

  static defaultProps = { ... }

}

// If you don't have es7 static support you can add it after the class def:
Child.defaultProps = { ... }

家长只需要做:

Child.defaultProps

访问它。