处理嵌套 React 组件的状态变化

所以，我有多个 ReactComponent。最初，我认为会有一个具有自己状态的父组件（让我们称之为 GrandPa），并且它将有关其状态的一些信息传递给另一个组件（称之为 Parent）。同样，Parent 将他的一些传递给 Child，child 传递给 GrandChild。所以我们有层次结构：

爷爷 -> 父母 -> 孩子 -> 孙子

然而，我很快意识到，当我用方法改变 GrandPa 的状态时this.setState(prevState => (<new state based on prevState>))，更改不会沿着通道级联。我意识到的另一个问题是将更改也传递到频道上。我还没有找到一个好的方法来做到这一点。 （之前，我做了一些非常粗略的事情，将一些事件绑定到 DOM 中的组件，并拥有一个可从所有 ReactComponent 访问的公共变量。然后，当任何人触发特定事件时，我会尝试触发事件来更新各自的组件......长话短说，这造成了很多问题并且很丑陋。）

因此，我在下面的示例代码中尝试仅使用父母和孩子来执行此操作。这是一个虚拟示例，但只是为了学习如何做到这一点。这位家长，名叫ReactRandom有一个状态{name: <name>}并且有一个方法可以将该名称更改为随机字符串。什么时候ReactRandom渲染，它从另一个组件渲染该名称ReactRandomNested它基本上打印出通过其自己的道具传递的名称。在这里，我在里面创建了一个方法ReactRandomNested它显式地呈现更改（顺便说一句，我不希望这样做，我认为有一种方法可以将更新级联到通道中，而不必显式地这样做，因为它会很快变得令人讨厌，因为我们有> 2个嵌套级别）。然而，即使这样也行不通。它有 1 步延迟并在当前时间步渲染先前的更新。

无论如何，这是我目前拥有的代码：

class RandomReactNested extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: props.name};
    }

    handleChange() {
        let self = this;
        self.setState({name: self.props.name});
    }

    render() {
        let self = this;
        return React.createElement("span", {
            onClick: () => self.handleChange.call(this)
        }, self.state.name);
    }
}

class RandomReact extends React.Component {
    constructor (props){
        super(props);
        this.state = {name: props.name};
        this.changeName.bind(this);
    }

    changeName () {
        let random_word_length = Math.round(Math.random()*20),
            index_count = 0,
            new_name = "",
            alphabet = "abcdefghijklmnopqrstuvwxyz";
        for (index_count; index_count <= random_word_length; index_count += 1) {
            new_name += `${alphabet[Math.round(Math.random()*random_word_length)]}`;
        }
        console.log(new_name);

        this.setState(prevState => ({
            name: new_name
        }));
    }

    render() {
        let self = this;
        return React.createElement("div", {
            key: 2,
            onClick: () => (this.changeName.call(self))
        },
            React.createElement(RandomReactNested, {
                name: self.state.name
            }));
    }
}

顺便说一句，我对 React 还很陌生，正在尝试学习如何有效地使用它。我还在 ReactJS 网站的页面末尾看到了这一点（https://reactjs.org/docs/composition-vs-inheritance.html），这似乎建议反对这一点（但我不完全确定？）：

“那么继承呢？ 在 Facebook，我们在数千个组件中使用 React，但我们还没有发现任何建议创建组件继承层次结构的用例。 道具和组合为您提供了以明确且安全的方式自定义组件的外观和行为所需的所有灵活性。请记住，组件可以接受任意 props，包括原始值、React 元素或函数。 如果您想在组件之间重用非 UI 功能，我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数、对象或类，而不扩展它。”

咳嗽，还原，咳嗽

无论如何，传递道具是一条单行道！你可以把东西传承下来并使用它们，但你不能把它们传承下去。操作父组件的唯一方法是将整个函数作为 props 传递。

updateGrandpaState(newData){
this.setState({ originalData: newData})
}

从你的祖父组件中，你会像这样传递它......

<ParentComponent updateGrandpaState={this.updateGrandpaState} />

在你的父组件中你可以调用

this.props.updateGrandpaState(parentComponentData)

然后，它将触发祖父组件中的原始函数，更新祖父组件状态。

是的，你可以走得更远，预警，你走得越深，事情就会变得越丑陋......

爷爷里面

< ParentComponent updateGrandpaState={this.updateGrandpaState} /> 

内部父级

< ChildComponent updateGrandpaState={this.props.updateGrandpaState} />

内心的孩子

this.props.updateGrandpaState(childComponentData)

当你深入两层时，我在进行开发工作时也会在 componentDidMount 上 console.log(this.props) 。

为了让事情变得更酷，你甚至可以将 grandpaState 传递给 ParentComponent 来使用，你可以将其连接到 componentWillRecieveProps......

<ParentComponent grandpaState={this.state} updateGrandpaState={this.updateGrandpaState} />

但说实话，一旦你学会了 redux，设置它几次，它真的很棒，我永远不会不使用它！