React - 传递后在子组件中调用父方法

Question

我正在尝试创建一个模态组件，我在其中将给定模态的内容作为子级传递。

< GGModal buttonLabel="Login" content={
    <LoginScreen
        setToken={setToken}
        token={token}
        setEmail={setEmail}
        email={email}
     />} />

然后在 GGModal 中我显示如下内容：

           <Modal
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
                style={{
                    overlay: { zIndex: 2 },
                }}
            >
                {content}
            </Modal>

我想从传递给它的任何给定内容调用 GGModal (closeModal) 中定义的方法。但是我不知道如何将道具传递给{content}

可能吗？

谢谢

Answer 1

使用 children 道具而不是定义您的自定义道具。 React 配置为将 children prop 作为任何作为子元素传递的 jsx 元素。确保在参数中提供 children 作为最后一个道具。

export default function GGModal({buttonLabel, children}){
       <Modal
            isOpen={modalIsOpen}
            onRequestClose={closeModal}
            style={{
                overlay: { zIndex: 2 },
            }}
        >
            {children}
        </Modal>
 }

Answer 2

您必须克隆 children 才能执行此操作。

export default GGModal = ({buttonLabel, children}) => {
      const parentFunction => 'parent function';
       <Modal
            isOpen={modalIsOpen}
            onRequestClose={closeModal}
            style={{
                overlay: { zIndex: 2 },
            }}
        >
            {React.cloneElement(children, { parentFuntion })}
        </Modal>
 }


<GGModal buttonLabel='Login' /> <LoginScreen
        setToken={setToken}
        token={token}
        setEmail={setEmail}
        email={email}
     /> </GGModal>

React - 传递后在子组件中调用父方法

React - call parent method in child component after passing it

javascript

modal-dialog

reactjs

react-modal