javascript - material-ui 中的 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件？

Question

我正在使用来自 material-ui 的 material-ui 组件.

<Fade in={!randomizeFlag}>
              <Grid>
                <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} ></Switch>} label="Start Value"></FormControlLabel>
                <TextField  type="number" label="Starting Value" value={startValue} onChange={this.handleStartValueChange} />
              </Grid>
</Fade>

我想在组件淡出时完全隐藏元素 Grid 但它只会禁用组件的可见性并在 DOM 中占用相同的空间(看起来是空的)。我如何使元素在淡出后隐藏使用<Fade>

Answer 1

<Fade in={!randomizeFlag} unmountOnExit={true}>
  ...
</Fade>

http://reactcommunity.org/react-transition-group/transition#Transition-prop-unmountOnExit

默认情况下，子组件在达到“退出”状态后会保持挂载状态。如果您希望在组件退出后卸载它，请设置 unmountOnExit。