как зделать что бы children принимал что то от parent

Question

можно ли как то в button передать функцию из контейнера

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>

Answer 1

Можно в самом контейнере добавить нужную функциональность. Для этого работайте с React.cloneElement(). Вот тут более подробнее - https://ru.reactjs.org/docs/react-api.html#cloneelement (проверяйте - один или несколько children, можно использовать map т.д. )

В вашем случае примерно так:

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>
}

БЛОГ НА HUSL

как зделать что бы children принимал что то от parent

Ответы (1 шт):