子、父、祖父和曾祖父 React 组件中的递归计算答案

【问题标题】：Recursive calculation in Child, Parent, Grand Parent and Great Grand Parent React Components子、父、祖父和曾祖父 React 组件中的递归计算
【发布时间】：2021-02-22 10:18:16
【问题描述】：

我有一个主要组件 ParentA，其中有子组件 ChildA、ChildB、ChildC 和 ParentB 和内部相同的重复组件。所以我真正需要的是，如果我在 ChildF 内进行任何计算，这会立即反映在 ParentC 列 A 中，但它也应该立即反映在 ParentB 和 ParentA 列的 A.

期待回复。

【问题讨论】：

您必须将子状态提升到父组件并将它们传递下去。这样，您就可以在共享数据时进行所需的所有计算。或者，您可以使用 Redux 或 Saga 等全局状态来跟踪每个组件的状态

标签： javascript reactjs react-hooks

【解决方案1】：

这里通常的解决方案是lift state up，在这种情况下是ParentC，并让ParentC 为后代组件提供一种更新ParentC 状态的方法，通过props 或@ 传递一个setter 987654322@.

这是一个使用 props 的小例子：

const {useState} = React;

function ParentC() {
    const [counter, setCounter] = useState(0);
    
    const addOne = () => {
        setCounter(c => c + 1);
    };
    
    const addTwo = () => {
        setCounter(c => c + 2);
    };
    
    return (
        <div>
            <DisplayChild value={counter} />
            <UpdaterChild onAdd={addOne} label="Add One" />
            <UpdaterChild onAdd={addTwo} label="Add Two" />
        </div>
    );
}

function UpdaterChild({onAdd, label}) {
    return (
        <input type="button" value={label} onClick={onAdd} />
    );
}

function DisplayChild({value}) {
    return <div>Value = {value}</div>;
}

ReactDOM.render(<ParentC/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

注意counter 是如何在父级保存并传递给子级的，以及（在相关的情况下）适当的设置器供他们调用。

【讨论】：