Question

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生命周期都会触发！仅在上面的例子中＆＃39;将出现＆＃39; ＆＃39;确实出现了＆＃39;

日志。

如果React中有错误？

ReactTransitionGroup生命周期挂钩不起作用

0 个答案: