有没有办法在功能组件中将数据传递给 props.children

Question

我正在做一个项目，希望能够将数据从组件发送到它的 props.children 组件。 我认为这是使用 class 组件中的渲染道具完成的，但我不知道如何在功能组件中实现它。 这是我想要完成的事情的一个极其简化的版本。 我想根据父级中设置的“编辑”在子级组件中呈现不同的东西。

function Parent({ children }) {
  const [edit, setEdit] = useState(false);
  return (
      <div>
        {"blah blah blah..."}
        <button onClick={()=>{setEdit(!edit)}}>Click</button>
      {children}
      </div>
  );
}

function Child() {
  if (edit === true) {
    return (
      <Parent>
        {"Edit is True"}
      </Parent>
    );
  }

  return (
    <Parent>
      {"Edit is False"}
    </Parent>
  );
}

Answer 1

您必须通过手动克隆元素来生成子组件。

如何将道具传递给 {this.props.children}

Answer 2

这是你需要的吗？ 您可以将状态分享给孩子

const Parent = () => {
 const [edit, setEdit] = useState(true);
  return (
    <>
      <div>Hello</div>
      <Child edit={edit} />
    </>
  );
};

const Child = params => {
  return params.edit? (
    <div>Do something if true</div>
  ):
  (
    <div>Do something if false</div>
  )
};