如何在反應中將道具傳遞給孩子？

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。