React 将 props 从父包装器传递给子代

Question

我需要将道具从包装器传递给子组件

有这样的结构：

CabinetBlockContainer.jsx

smallChild.jsx

现在我的smallChild.jsx看起来像：

return (
    <CabinetBlockContainer>
      <div className={props.className}>
        <Typography variant="h6" color="primary">
          {props.title}
        </Typography>
        <Typography variant="caption">{props.subtitle}</Typography>
      </div>
      <BalanceSmallBlock balance="1254.51" needIcon={props.needIcon} />
    </CabinetBlockContainer>
  );

和我的容器看起来像：

 return (
    <div className={props.className}>
      <div className="block-wrapper" >

      </div>
    </div>
  );
})

我的块有很多样式，这就是我创建包装器（ CabinetBlockContainer ）的原因。 我需要将道具从我的 CabinetBlockContainer 传递给它的子组件。 我真的不知道这是最佳做法，但似乎很正常。

我试图在文档中找到如何传递这样的道具，但有任何解决方案。

Answer 1

使用{props.children}您的包装里面，似乎你想要做像这样。

Answer 2

您可以将道具传递给孩子，同时使用新道具克隆它

为了更好地理解 props 和 state 是如何工作的，请参考这个

这是以前在SO上回答的相同问题的示例