Question

我有一个componenet，它的状态很多，大多数应该由子组件更新。将this.setState从父级传递到子级将很方便，因为我不必分别处理每个属性。但是，这也感觉像是反模式。通过this.setState是个好主意还是应对这种情况的正确方法是什么？

编辑：看到第一个答案后，我发现我没有正确说明问题。我将在示例中更清楚地说明。我正在使用打字稿BTW。

class Parent extends React.Component<Props, State> {
    state: State = {
        prop1: "something",
        prop2: "something",
        prop3: "something",
        ...
        propn: "something",
        ...
    }

    render() {
        return (
              <div>
                    <Child handleChange={this.setState} /> //version 1 - universal
                    <Child //version2 - every prop has its own handler
                          handleChange1={(prop1) => {this.setState({prop1: prop1})}
                          handleChange2={(prop2) => {this.setState({prop2: prop2})}
                          ...
                          handleChangen={(propn) => {this.setState({propn: propn})}
                    />
              </div>
        );
    }

}

我知道处理程序应该具有自己的方法，在此不将其声明为箭头函数，但这只是出于演示目的。因此，版本1看起来更简单，但似乎传递this.setState并非应有的方式。可以在这里使用它吗？

Answer 1

孩子通常需要更新父母的状态。在父级上，您可以设置一个handleState之类的函数，然后传递给子级，子级在特定条件下会调用它。

此函数将保留调用this.setState的逻辑，并且很可能接收到用于更新父状态的参数。

将setState从父级传递给子级是反模式

1 个答案: