在 React 中将功能组件从子组件传递给父组件

Question

是否可以将功能组件从子组件传递到父组件？我正在尝试做一个显示在父级内部但子级可以通过提供者的函数填充的动态模式，例如：

setModal(() => (
    <div>content</div>)
)

并且父级接收此组件：

const [modal, setModal] = useState(false)
const [modalContent, setModalContent] = useState<FunctionComponent>()
...
<Provider value={{
    setModal: (content: FunctionComponent) => {
        setModalContent(content); // This updates the state to hold a function component and to re-render
        setModal(true); // This updates a state flag to show the overlay in which the modal is rendered
    },
}}>
...
</Provider>

模态的内容应该是动态的。我试图使用组件的状态来保存功能组件，但我不认为这是否可能或者这是一个好的做法。

Answer 1

如果我对你的问题的理解正确，你仍然希望将一个函数从父级传递给每个子级，但每个子级都应该能够更改父级也拥有所有权的模态组件的状态。

对于上述情况，您可以执行以下操作：

const Provider = ({ children, updateModal }) => {
  // With this, every child has the ability to call updateModal
  return React.Children(children).map(child => cloneElement(child, { updateModal }));
};

const ModalComponent = ({ open, children }) => {
  if (!open) return null;

  return (
    <dialog>
      {children}
    </dialog>
  );
};

const ParentComponent = () => {
  const [modal, setModal] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  const updateModal = (content) => {
    setModalContent(content);
    setModal(true);
  };

  return (
    <>
      <Provider updateModal={updateModal}>
        {...insert children here}
      </Provider>
      <ModalComponent open={modal}>
        {modalContent}
      </ModalComponent>
    </>

  );
};

在 React 中将功能组件从子组件传递给父组件

Pass functional component from child to parent in React

javascript

modal-dialog

dynamic

reactjs