Question

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


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

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

How to pass props to {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>
  )
};

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

2 个答案: