javascript - 如何将 Prop 传递给组件的 child

Question

const ListView = () => {
  return(
    <ul>
      <ListItem modal={<Modal />} />
    </ul>
  )
};

const ListItem = (props) => {
  const [visible, setVisible] = useState(false);
  const toggle = () => setVisible(!visible)

  return (
    <>
      <li>
        ListItem 
      </li>
      <ModalWrapper toggle={toggle}>{props.modal}</ModalWrapper>
    </>
  )
}

const ModalWrapper = (props) => {
  if(!props.visible) return null;
  return (
    <>
      {props.children}
    </>
  )
}

const Modal = ({ toggle }) => {
  /* I would like to use toggle() here. */
  return (
    <>
      <div onClick={toggle} className="dimmer"></div> 
      <div className="modal">modal</div>
    </>
  )
}

我有一个函数 toggle()在 <ListItem />如上所示。

我正在努力使用 toggle()在 <Modal /> .

是否可行或有什么建议？

Answer 1

您需要将 toggle 注入(inject)到 ModalWrapper children，注意不要覆盖 Modal 上的 toggle 属性

const ModalWrapper = ({ children, visible, toggle }) => {
  const injected = React.Children.map(children, child =>
    React.cloneElement(child, { toggle })
  );
  return <>{visible && injected}</>;
};

引用React.cloneElement和 React.Children.map .

演示: