Передать функцию от родителя к детям в React.Children.map?

Я использую 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.

Как вы хотите, чтобы slide вам позвонили? по щелчку ?

Asaf Aviv 15.03.2019 16:29

слайд на самом деле является компонентом (Child1, Child2 и т. д.), который отображается.

Evanss 15.03.2019 20:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
194
1

Ответы 1

У меня это работает с React.cloneElement

          <div
            tabIndex = "-1"
          >
            {React.cloneElement(slide, {
              someFunction: this. someFunction,
            })}
          </div>

Другие вопросы по теме