如何在反应中将道具传递给孩子？

Question

我正在尝试将道具传递给孩子。 现在我的一个组件有一个 state 并且它正在渲染另外两个组件：

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

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

在MoveHive ，我使用props.children将<PlantationMap>渲染为子级，并且效果很好。

但是我想将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

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

从这个沙箱中可以看出，传递道具确实有效。

最重要的是，您的设置中可能存在两件事 go 错误：

1. 您的代码尚未编译，因此您看到的是陈旧的 output。
2. MoveHive 组件在子组件上调用React.cloneElement并弄乱了它的 props。