Javascript ReactTransitionGroup生命周期挂钩不起作用 类子级扩展组件{ 组件将出现（回调）{ console.log（'将出现'）； 回调（）； } 组件显示（）{ console.log（'确实出现'）； } componentWillEnter（回调）{ 回调（）； console.log（'will enter'）； } componentDidEnter（）{ console.log（'dienter'）； } 组件将离开（回调）{ 回调（）； 控制台日志（“将离开”）； } 组件离开（）{ console.log（'did leave'）； } 组件将卸载（）{ log（'will unmount'）； } render（）{ 返回( {this.props.children} ); } } 类Carousel扩展组件{ 状态={ idx:0， 项目：['abc'，'def'，'hij'] }; onClick=（）=>{ var idx=this.state.idx+1； 这是我的国家({ idx:idx }); }; getChild（项目）{ 返回{item}； } render（）{ const idx=this.state.idx； const items=this.state.items； 常量项=项[idx]； const child=this.getChild（项）； 返回( {child} 点击我 ); } }

首先，我想通过ReactCSStransitongGroup创建一个旋转木马，但是有一个简单的css转换。如果我想添加一些事件，它将无法工作。 所以，我想使用ReactTransitionGroup。但一旦我用了它，我就得不到我想要的一些钩子了

不是所有的ReactTransitionGroup生命周期挂钩都着火了！在上述示例中，仅 “将出现” “确实出现了”

日志

---

如果React中有错误？

我也有同样的问题，您能帮助我们吗？

class Child extends Component {
  componentWillAppear(callback) {
    console.log('will appear');
    callback();
  }
  componentDidAppear() {
    console.log('did appear');
  }
  componentWillEnter(callback) {
    callback();
    console.log('will enter');
  }
  componentDidEnter() {
    console.log('did enter');
  }
  componentWillLeave(callback) {
    callback();
    console.log('wiil leave');
  }
  componentDidLeave() {
    console.log('did leave');
  }
  componentWillUnmount() {
    console.log('will unmount');
  }
  render() {
    return (
        <div key={this.props.children} className="item">{this.props.children}</div>
    );
  }
}


 class Carousel extends Component {
  state = {
    idx: 0,
    items: ['abc', 'def', 'hij']
  };

  onClick = ()=> {
    var idx = this.state.idx + 1;
    this.setState({
        idx: idx
    });
  };

  getChild(item) {
    return <Child>{item}</Child>;
  }

  render() {
    const idx = this.state.idx;
    const items = this.state.items;
    const item = items[idx];
    const child = this.getChild(item);
    return (
        <div>
            <ReactTransitionGroup
                component="div"
                className="carousel"
                transitionName="item"
            >
                {child}
            </ReactTransitionGroup>
            <div onClick={this.onClick} className="btn">click me</div>
        </div>
    );
  }
}