将道具传递给 children React 时出现未定义错误

Question

我正在关注问题以了解如何将道具传递给 children。不过，我自己的组件出现错误。

组件 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 传递给 children？

Answer 1

您的结构表明您包含

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

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

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

将道具传递给 children React 时出现未定义错误

Undefined error when passing props to children React

javascript

reactjs

react-native

react-props