在 React.Children.map 中将函数从父级传递给子级？答案

【问题标题】：Pass function from parent to children in React.Children.map?在 React.Children.map 中将函数从父级传递给子级？
【发布时间】：2019-03-16 03:32:33
【问题描述】：

我一直在可重用 TransitionComponent 中使用 React 转换组

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 子级无效。如果发生这种情况您返回一个组件而不是从渲染。或者可能你的意思是调用这个函数而不是返回它。

【问题讨论】：

您希望slide 如何被调用？点击？
slide 实际上是被渲染的组件（Child1、Child2 等）。

标签： reactjs react-transition-group

【解决方案1】：

我可以使用 React.cloneElement

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

【讨论】：