Question

我正在使用React Transition Group构建侧边栏组件。相关代码如下：

function FirstChild(props) {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
}

class Sidebar extends Component {
   componentWillEnter(cb) { console.log('entering'); cb() }
   componentWillLeave(cb) { console.log('leaving'); cb() }

   render() { 
     // return sidebar jsx
   } 
}

class Nav extends Component {
  ...

  toggleSidebar() { 
    const newState = !this.state.show;
    this.setState({ show: newState })
  }

  render() {
    return (
      <TransitionGroup component={FirstChild}>
        { (this.state.show == true) ? <Sidebar /> : null }
      </TransitionGroup>
    )
  }
}

问题在于，当我尝试切换侧边栏时，没有触发任何生命周期挂钩。在第一次单击时，侧边栏将添加到DOM并调用componentDidMount但不会调用componentWillEnter。当我再次单击以隐藏它时，state.show被正确设置为false但是侧边栏没有隐藏，这次没有触发生命周期钩子。

我想知道我是否正确地使用了三元运算符来有条件地渲染补充工具栏，或者原因是因为我只在TransitionGroup下渲染一个孩子（为此，我使用了FirstChild method found here）。

Answer 1

问题在于渲染逻辑。出于某种原因

{ (this.state.show == true) ? <Sidebar /> : null }

不会触发TransitionGroup生命周期功能，如ComponentWillEnter / ComponentWillLeave，但会将其更改为

{ this.state.show && <Sidebar }

解决了这个问题。

React TransitionGroup不会在状态更改时卸载子级

1 个答案: