3 
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>
    );
  }
}

起初，我想通过 ReactCSSTransitionGroup 制作一个轮播，但是有一个简单的 css 过渡。如果我想添加一些事件，它就无法工作。所以，我想使用 ReactTransitionGroup。但是一旦我使用它，我就无法得到我想要的一些钩子不起作用。

并非所有 ReactTransitionGroup 生命周期钩子都会触发！在上面的例子中，只有'将出现''确实出现'

日志。

如果 React 中存在错误？

4

0 回答 0