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

Question

所以，我有多个ReactComponent。最初，我以为会有一个带有其自身状态的父组件（简称为GrandPa），它将有关其状态的一些信息传递给另一个组件（称为Parent）。同样，父母将他的一些财产传给孩子，孩子则传给孙子。因此，我们具有层次结构：

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

但是，我很快意识到，当我使用method this.setState(prevState => (<new state based on prevState>))更改GrandPa的状态时，所做的更改不会沿通道向下级联。我意识到的另一个问题是也要通过频道更改。我还没有找到执行此操作的好方法。（之前，我通过将某些事件绑定到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，我们还没有发现建议创建组件继承层次结构的用例。道具和组合为您提供了自定义组件外观所需的所有灵活性。请记住，组件可以接受任意道具，包括原始值，React元素或函数。如果要在组件之间重用非UI功能，建议将其提取到单独的JavaScript模块中。组件可以导入它并使用该函数，对象或类，而无需对其进行扩展。”

Answer 1

咳嗽感冒咳嗽

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

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

从您的祖父组件中，您可以像这样将其传递下去…

<ParentComponent updateGrandpaState={this.updateGrandpaState} />

在父组件中，您可以调用

this.props.updateGrandpaState(parentComponentData)

然后，它将触发存在于grandpaComponent中的原始函数，从而更新grandpaComponent State。

是的，您可以走得更远，预警，越深入，它就会变得越丑…

爷爷里面

< 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，对其进行了几次设置，它真的很棒，我将永远不会使用它！