时间戳

首页 > 解决方案 > 将道具传递给孩子反应时出现未定义的错误

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

问题描述

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

组件 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道具从DataWrapperto 传递给Migration. 但是，我undefined在运行时得到了console.log(props.test);. 我是否test错误地传递了道具？我必须怎么做才能成功地将道具传递给孩子？

标签： javascriptreactjsreact-nativereact-props

解决方案

您的结构表明您包括

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

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

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

推荐阅读