Question

我正试图将道具传递给孩子们。现在，我的一个组件处于状态，并且正在渲染其他两个组件：

 const [state, setState] = useState({
    plantation: {
      points: [],
      finished: false
    },
    cultures: [
      {
        culture: "",
        points: []
      }
    ]
  });

 return (
    <MoveHive>
        <PlantationMap />
    </MoveHive>
  );

在MoveHive中，我使用<PlantationMap>将props.children渲染为儿童，效果很好。

但是我想将state从第一个组件传递到<PlantationMap>。我试图像普通道具一样做：

 const [state, setState] = useState({
    plantation: {
      points: [],
      finished: false
    },
    cultures: [
      {
        culture: "",
        points: []
      }
    ]
  });

 return (
    <MoveHive>
        <PlantationMap state={state} setState={setState} />
    </MoveHive>
  );

但是<PlantationMap>没有收到道具const { state, setState } = props;都返回null。

在这种情况下我应该如何传递道具？

我正在使用Hooks，所以没有类，只有函数。

预先感谢

Answer 1

您的方法（使用常规道具）是正确的。

从this sandbox中可以看到，传递道具确实可以工作。

最重要的是，您的设置中有两件事可能会出错：

您的代码尚未编译，因此您将看到过时的输出。
MoveHive组件在子级上调用React.cloneElement，并将其道具弄乱了。

如何将道具传递给孩子做出反应？

1 个答案: