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

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

0 голосов
/ 15 марта 2019

Я использовал 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.log('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>
        )
    }
}

Но я получаю эту ошибку:

Предупреждение: функции недопустимы как дочерние элементы React. Это может случиться, если вы возвращаете Компонент вместо от рендера. Или, может быть Вы хотели вызвать эту функцию, а не возвращать ее.

1 Ответ

0 голосов
/ 15 марта 2019

Я получил его с React.cloneElement

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