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。

当组件包装在父级中时，防止重新安装

1 个答案: