Question

有一个父<MessageBox />元素，其中包含存储在状态中的messages列表。对于message中的每个messages，在<Message />内创建<MessageBox />元素，其中包含message.subject和message.body的字段。用户可以修改message.subject和message.body，完成后，message对象将通过<MessageBox />发送回props.updateHandler()，以维护消息状态。父节点。

在我目前的方法中，我将消息数据存储在MessageBox的状态和render()函数中，我创建了{{1}元素并将回调传递给每个元素以发回数据更改。在回调中，来自每个<Message />元素的更新数据将更新回<Message />状态。这样做的原因是仅将所有最近更新的数据保存在一个地方。如果MessageBox中的shouldComponentUpdate()方法没有重载（无限递归），上述方法会造成严重破坏。

有更好的方法吗？我写了很多代码只是为了覆盖内置方法以保持整个事情的稳定。由于我不打算选择Flux / Redux，有没有针对此的React方法？

编辑：由于存在很多混淆，我添加的代码最少。

<Message />

Answer 1

如果可以提供帮助，请阅读thinking-in-react。它解释了数据应该只是一种方法，以避免在UI更新中丢失。

React ToDo MVC将为您提供React良好实践的示例

要知道如何将父母的道具传递给儿童阅读controlled-components。您必须在每个输入上使用value和onBlur。任何onBlur事件都会以this.props.updateHandler作为参数调用e，而不是e => this.setState({type: e.target.value})。

Answer 2

不要从MessageBox componentDidUpdate()回复Message。直接从Message中的操作进行回调。
您根本不需要Message组件中的州。如果您正确更新父状态，道具将保留您感兴趣的值。

您需要的是：

    <input type="text"
       defaultValue={this.props.subject}
       onBlur={e => this.updateSubject(e.target.value)} />

    updateSubject: function(newSubjectValue) {
         this.props.updateHandler(messageIndex, {
            subject: newSubjectValue,
            body: this.props.body,
            type: this.props.type
    });
    }

这样组件将被重新渲染，但不会再次调用父级的setState。

ReactJS：维护父级和子级之间的数据状态

2 个答案: