Question

我一直在可重复使用的TransitionComponent

中使用React Transition Group

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子元素无效。如果发生这种情况您返回一个Component而不是从render返回。或许您打算调用此函数而不是返回它。

Answer 1

我与React.cloneElement一起使用

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

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

1 个答案: