javascript - 当组件包裹在父组件中时防止重新挂载

Question

我有一个组件，可能会也可能不会在包装器组件中呈现:

class Video extends Component {
  state = { isFullscreen: false }

  render () {
    const { isFullscreen } = this.state

    return (
      <View>
        {isFullscreen ? (
          <Modal>
            <VideoView />
          </Modal>
        ) : (
          <VideoView />
        )}
        <Button title='inline' onPress={() => this.setState({ isFullscreen: false })} />
        <Button title='fullscreen' onPress={() => this.setState({ isFullscreen: true })} />
      </View>
    )
  }
}

每次我按inline或fullscreen ，<VideoView />重新安装。这使得很难将初始化逻辑添加到 componentWillMount方法。我可以在我的应用程序中进行其他检查以确保其正常运行，但重用已存在的组件感觉更好。

有没有办法回收<VideoView /> ？

Ps 我的项目是在 React Native 中，所以我使用了 RN 的一些语法/组件，但我认为这个问题也适用于普通的 React 项目

Answer 1

尝试使用包装器包装组件，然后根据状态更改切换该包装器的样式。我想这应该可行。

此外，如果您即将仅重用模态组件，您可以做的就是在模态组件上的新 className 下定义一些 CSS，以更改所需的样式以实现模态切换的效果。然后根据状态变化添加删除className。