主页 / 问题 / 1263347
Accepted
Armen
Asked:2022-03-29 19:27:19 +0800 CST2022-03-29 19:27:19 +0800 CST

如何让孩子从父母那里拿东西

  • 772

是否有可能以某种方式将容器中的函数传递给按钮

export const PopupContainer = ({children}) => {
const [isOpen, setIsOpen] = useState(false)

const closePopup = () => {
    setIsOpen(false);
  }

  const openPopup = () => {
    setIsOpen(true);
  }

return (
        {children}
);
}

执行

<PopupContainer>
    <button onClick={openPopup}></button>
</PopupContainer>
reactjs

1 个回答

  1. Best Answer

    您可以在容器本身中添加所需的功能。为此，请使用React.cloneElement(). 这是更多详细信息 - https://ru.reactjs.org/docs/react-api.html#cloneelement（检查 - 一个或多个孩子，您可以使用地图等）

    在你的情况下是这样的：

    const PopupContainer = ({children, props}) => {
    const [isOpen, setIsOpen] = React.useState(false)
    const closePopup = () => {
        setIsOpen(false);
    }

    const openPopup = () => {
        setIsOpen(true);
    }


    return React.cloneElement(children, {
        onClick: () => {
            setIsOpen(p => !p);
            console.log(isOpen);
        }
    })
}

const App = () => {
    return <PopupContainer>
        <button>click me</button>
    </PopupContainer>
}
    • 1

相关问题