Я использую React Transition Group в многоразовом TransitionComponent
class TransitionComponent extends React.Component {
render() {
return(
<div>
{
React.Children.map(children, (slide) => {
return (
<CSSTransition
key = {slide.props.hash}
unmountOnExit
>
<div tabIndex = "-1" >
{slide}
</div>
</CSSTransition>
);
})
}
</div>
)
}
}
TransitionComponent используется так:
<TransitionComponent>
<Child1 />
<Child2 />
<Child3 />
</TransitionComponent>
До сих пор это работало, но теперь мне нужно передать функцию от TransitionComponent дочерним элементам.
Я пробовал это:
class TransitionComponent extends React.Component {
someFunction = () => {
console.info('someFunction was called')
}
render() {
return(
<div>
{
React.Children.map(children, (slide) => {
return (
<CSSTransition
key = {slide.props.hash}
unmountOnExit
>
<div tabIndex = "-1" >
{ () => slide({ someFunction: this.someFunction }) }
</div>
</CSSTransition>
);
})
}
</div>
)
}
}
Но я получаю эту ошибку:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
слайд на самом деле является компонентом (Child1, Child2 и т. д.), который отображается.





У меня это работает с React.cloneElement
<div
tabIndex = "-1"
>
{React.cloneElement(slide, {
someFunction: this. someFunction,
})}
</div>
Как вы хотите, чтобы
slideвам позвонили? по щелчку ?