处理嵌套 React 组件的状态更改

Question

所以，我有多个ReactComponent。最初，我以为将有一个带有自己的状态的父部分（让我们称之为爷爷），它将将有关其状态的一些信息传递给另一个组件（称其为parent）。同样，父母将他的一些孩子和孩子传给孙子。因此，我们有层次结构：

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

但是，我很快意识到，当我使用方法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
            }));
    }
}

顺便说一句，我很熟悉反应，并试图学习如何有效地使用它。我还从reactjs网站到页面结束时看到了这一点（https://reaectjs.org/docs/composition-vs-inheritance.html），这似乎是在建议反对这一点的建议（但是我不确定吗？）：

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

Answer 1

咳嗽，redux，咳嗽

无论如何，通过道具是一条单向街道！您可以将事情传递给并使用它们，但是您不能将它们传递给它们。操纵父组件的唯一方法是将整个功能作为道具传递。

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）。

为了使事情变得更酷，您甚至可以将孙子向下传递到parentcomponent中，您可以将其连接到componentWillRecieveProps .....

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

但是，老实说，一旦您学习了Redux，就设置了几次，它真的很棒，我永远不会使用它！