如何在没有缩减器的情况下从深层嵌套的子组件更新祖先状态

Question

我有一个 React 应用程序，其结构类似于下面的代码（但更复杂）。实际上，我要更改的只是孙组件中的数据（本例中为 grandchild.name）。但是，我必须在层次结构中的所有组件上传递 getters (props) 和 setters (onChange) 处理程序，使其不必要地复杂化（特别是如果添加了更多嵌套组件（例如 GreatGrandChild）。

// Parent
const Parent = () => {
    const [child, setChild] = useState({
        name: 'Jack',
        grandChild: {
            name: 'John'
        }
    });

    return (
        <div>
            <Child data={child} onChange={newChild => setChild(newChild)} />
        </div>
    );
};

// Child
const Child = props => {
    const handleChange = newGrandChild => {
        props.onChange({ name: props.data.name, grandChild: newGrandChild });
    };

    return (
        <div>
            <GrandChild data={props.data.grandChild} onChange={handleChange} />
        </div>
    );
};

// Grand Child
const GrandChild = props => {
    const handleChange = e => {
        props.onChange({ name: e.target.name });
    };

    return (
        <div>
            <input type='text' onChange={handleChange} />
        </div>
    );
};

那么如何在不在子组件中添加handleChange函数的情况下更新父状态。听说“函数柯里化”可以解决这个问题，但我不知道在这种情况下如何使用它。

P.S。我需要一个不包含 Contexts and/or Reducers 的解决方案，因为这对我的用例来说太过分了。此外，在父组件中创建“updateGrandChild”函数并将其传递给孙组件也不起作用，因为我的数据结构包含一个数组属性，其中索引是动态的。

Answer 1

import { useState } from "react";

// Parent
const Parent = () => {
  const [child, setChild] = useState({
    name: "Jack",
    grandChild: {
      name: "John"
    }
  });

  return (
    <div>
      <pre>{JSON.stringify(child, null, 2)}</pre>
      <Child data={child} onChange={setChild} />
    </div>
  );
};

// Child
const Child = ({ data, onChange }) => {
  return (
    <div>
      <GrandChild data={data.grandChild} onChange={onChange} />
    </div>
  );
};

// Grand Child
const GrandChild = ({ data, onChange }) => {
  return (
    <div>
      <input
        type="text"
        value={data.name}
        onChange={(e) =>
          onChange((data) => ({
            ...data,
            grandChild: {
              ...data.grandChild,
              name: e.target.value
            }
          }))
        }
      />
    </div>
  );
};
export default function App() {
  return <Parent />;
}

Codesandbox here

如何在没有缩减器的情况下从深层嵌套的子组件更新祖先状态

How to update ancestor state from deeply nested child component without reducers

javascript

reactjs

currying