将道具传递给孩子反应时出现未定义的错误答案

【问题标题】：Undefined error when passing props to children React将道具传递给孩子反应时出现未定义的错误
【发布时间】：2021-09-03 12:54:30
【问题描述】：

我正在关注this 的问题，以了解如何将道具传递给孩子。不过，我在自己的组件中遇到了错误。

组件 1，DataWrapper：

export default function DataWrapper(props) {
  return (
    <DashboardWrapper>
      {cloneElement(props.children, { test: "hello there" })}
    </DashboardWrapper>
  );
}

组件 2，迁移：

export default function Migration(props) {
  console.log("props.test");
  console.log(props.test);
  return (
    <DataWrapper>
      <div>hello</div>
    </DataWrapper>
  );
}

我正在尝试将 test 属性从 DataWrapper 传递给 Migration。但是，在运行console.log(props.test); 时，我得到了undefined。我是否错误地传递了test 道具？我必须怎么做才能成功地将道具传递给孩子？

【问题讨论】：

props.test 属于迁移参数
你必须像这样通过它。然后在你的子组件中，你会得到道具。
您不能将道具从DataWrapper 传递给Migration，因为DataWrapper 是一个孩子Migration。道具只能向下流动。您当前正在将test 传递给div，它是DataWrapper 的孩子。

标签： javascript reactjs react-native react-props

【解决方案1】：

你的结构表明你正在包括

<Migration>
  <DataWrapper>
    <DashboardWrapper>
      cloneElement()
    </DashboardWrapper>
  </DataWrapper>
</Migration>

所以外部Migration 对象不会从 DashboardWrapper 函数 cloneElement() 中获取任何道具。

如果您的结构不同，请尝试在您的问题中详细说明完整的结构。

【讨论】：