Question

我有一个需要配置的javascript对象。组态以后在对象上调用一些可选函数的形式出现它已被创建。

在React中，使用父/子模型进行建模似乎是合理的关系：

<Parent>
  <ChildConfigOption/>
</Parent>

在父的componentDidMount中，我使用DOM元素创建一个javascript对象。创建对象后，我将其添加到此（this.foo = myobj），我就是试图通过上下文将this.foo暴露给孩子，以便孩子可以打电话配置父级的方法。

难点在于孩子中this.context.foo未定义。一个对父母与孩子之间生命周期的深入研究表明了原因：

ParentComponent - getDefaultProps
ChildComponent - getDefaultProps
ParentComponent - getInitialState
ParentComponent - componentWillMount
ParentComponent - render
ChildComponent - getInitialState
ChildComponent - componentWillMount
ChildComponent - render
ChildComponent - componentDidMount <--- Try to access this.context.foo: it's undefined
ParentComponent - componentDidMount <--- obj created, assigned to this.foo which is shared via the context.

所有这些背后的问题是，约束条件只能在DOM节点存在后创建对象（即：在父componentDidMount中）：我该怎么做？

对此有更好的方法吗？

Answer 1

我认为这是而非非常惯用。为什么不简单地拥有配置属性？

如果你需要更新配置，你可以简单地将一个函数传递给子节点，子节点然后可以通知父节点将要重新渲染的更改。

onOptionChange (configOption) {
  this.setState(configOption)
}
...
<Parent config={this.state.configOption}>
  <Child onOptionChange={this.onOptionChange}/>
</Parent>

使用子对象配置父对象

1 个答案: