Передайте родительские атрибуты дочернему компоненту с помощью дочернего метода
У меня такая ситуация:
Я вызываю родительский модальный компонент с содержимым:
<Modal onClickOnYesButton = {() => console.info('test')}>
<ModalContent />
</Modal>
Сам модальный компонент выглядит так:
const Modal = ({ children }) => {
return(
<div>
{children}
</div>
)
}
Таким образом, компонент модального содержимого отображается внутри модального окна с помощью children.
Вопрос в том, как я могу передать onClickOnYesButton в <ModalContent />, не помещая его непосредственно в атрибут ModalContent?
Ответы 2
Можно определить метод, используемый в onClick, как статический, импортировать компонент и получить доступ к функции с помощью <ComponentName>.<functionName>.
class ModalParent extends React.Component {
render() {
return (
<Modal>
<ModalContents />
</Modal>
);
}
static onClickYes = (e) => {
console.info(e.target, 'yes')
}
}
class ModalContents extends React.Component {
render() {
return (
<div onClick = {ModalParent.onClickYes}>Some Modal Contents</div>
);
}
}
class Modal extends React.Component {
render() {
return (
<div className = "modal" onClick = {ModalParent.onClickYes}>
<h1>Modal</h1>
{this.props.children}
</div>
)
}
}
ReactDOM.render(<ModalParent />, document.getElementById('root'));.modal {
border: 1px solid black;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>Добавлена опция статического метода, я заменю код
how could I pass onClickOnYesButton to without placing it directly as a ModalContent attribute
Если вы хотите передать реквизит ребенку, вы можете использовать React.cloneElement(children, { ...props }) внутри своего Modal.
то есть что-то вроде этого:
const Modal = ({ children, ...props }) => {
return(
<div>
{ React.cloneElement(children, { ...props }) }
</div>
)
}
Обратите внимание, что это будет работать только для одного ребенка, если у вас их больше, вам нужно будет обернуть React.cloneElement внутри React.Children.map.
Ваше решение передает его как атрибут:
<ModalContents onClick = {this.onClickYes} />, что и хочет сделать нет.