如何从父元素中获取子元素的所有状态？

Question

如何从父元素中获取子元素的所有状态？

我创建了一个页面，有几个元素，最重要的是这个组件列表。

这是父元素：

const Home = () => {
    const walls = [1, 2, 3, 4];

    return (
        <Layout>
                {walls.map(wall => {
                    return <Wall key={wall} index={wall} />;
                })}
        </Layout>
    );
};

如您所见，它生成了一个带有 map 的元素列表。

那么，如何从父元素中获取所有子状态？

这是子组件：

const Wall = ({ index }: IWall) => {
    const { doors, windows, handleWindows, handleDoors } = 
    useWall();

    return (
        <div>
            <input .../>
            <input .../>
            ...
        </div>
    );
};

它是钩子：

export const useWall = () => {
    const [doors, setDoors] = useState(0);
    const [windows, setWindows] = useState(0);

    const handleWindows = (value: number) => {
        if (value < 0 || value > 50) return;

        setWindows(value);
    };

    const handleDoors = (value: number) => {
        if (value < 0 || value > 50) return;

        setDoors(value);
    };


    return { doors, windows, handleWindows, handleDoors };
};

Answer 1

它通常被认为是父组件进入子组件以访问 state 和函数的 React 反模式。 解决方案是将State 提升到父组件并将 state 和 state 更新回调作为道具传递给子组件。

例子：

const Home = () => {
  const [walls, setWalls] = useState<IWall[]>(
    [1, 2, 3, 4].map((id) => ({
      id,
      doors: 0,
      windows: 0
    }))
  );

  const changeHandler = (id: number) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;

    if (Number(value) >= 0 && Number(value) <= 50) {
      setWalls((walls) =>
        walls.map((wall) =>
          wall.id === id ? { ...wall, [name]: value } : wall
        )
      );
    }
  };

  return (
    <Layout>
      {walls.map((wall) => {
        return (
          <Wall
            key={wall.id}
            wall={wall}
            changeHandler={changeHandler(wall.id)}
          />
        );
      })}
    </Layout>
  );
};

...

interface IWall {
  id: number;
  doors: number;
  windows: number;
}

interface WallProps {
  wall: IWall;
  changeHandler: React.ChangeEventHandler<HTMLInputElement>;
}

const Wall = ({ changeHandler, wall }: WallProps) => {
  return (
    <div>
      <h2>Wall: {wall.id}</h2>
      <label>
        Doors
        <input
          name="doors"
          type="number"
          value={wall.doors}
          onChange={changeHandler}
        />
      </label>
      <label>
        Windows
        <input
          name="windows"
          type="number"
          value={wall.windows}
          onChange={changeHandler}
        />
      </label>
    </div>
  );
};