Как поймать, когда компонент скрыт? - PullRequest
Новая
       8

Как поймать, когда компонент скрыт?

0 голосов
/ 16 мая 2018

Я хочу знать, когда работает Hidden.У меня есть два компонента, категории и новости.

Когда разрешение экрана xsUp, я хочу показать оба.Когда по категориям виден новостной компонент paddingLeft = categoryiries.Width, но xsDown я хочу скрыть сетку категорий и сделать новостной компонент paddingLeft равным 0.

Вот как это работает. 

 render() {
    const { classes } = this.props;
    let news = this.props.news.map((item, index) =>{
        return (
        <Zoom in={true} timeout={500}>
          <Grid item lg={3} xs={12} sm={12} md={6} lg={4} key={item.uid} spacing={16}>
            <Paper elevation={0} className={classes.paper}>
              <RecipeReviewCard info={item} />
            </Paper>
           </Grid>
        </Zoom>
  )
});

return (
  <div className={classes.root}>
        <Grid container className={classes.root}>
          <Grid item xs={12}>
            <Grid
              container
              spacing={16}
              className={classes.demo}
              alignItems={this.state.alignItems}
              direction={this.state.direction}
              justify={this.state.justify}
            >
            <Hidden xsDown>
              <Grid 
              item 
              lg={2} 
              md={4} 
              style={{
                width: 270, 
                maxWidth: 280, 
                minWidth: 270, 
                position: 'absolute', 
                height: '100%', 
                zIndex: 1
              }}>
                <Categories />
              </Grid>
            </Hidden>
              <Grid container item lg={12} md={12} spacing={16} style={{paddingLeft: 300, zIndex: 0}}
              >
                {news}
              </Grid>
            </Grid>
          </Grid>
      </Grid>
  </div>
  ); 
}

This is a full screen.

enter image description here

1 Ответ

0 голосов
/ 18 мая 2018

Я нашел решение простое решение сам.Я отправляю свою функцию для компонента Categories, и когда Component didMounting или willUnmounts я отправляю Boolean, что случилось.

Примерно так: Categories.js 

componentDidMount = () => {
  console.log('CREATED');
  this.props.showFull(false);
};

componentWillUnmount = () => {
  this.props.showFull(true);
}

Main.js 

  constructor(props) {
    super(props);
    this.state = {
      direction: 'row',
      justify: 'flex-start',
      alignItems: 'stretch',
      hidden: true
    }
  }

  updateState = (ok) => {
    this.setState({
      hidden: ok,
    });
    console.log('updated ' + ' ' + ok);
  }


    return (
  <div className={classes.root}>
        <Grid container className={classes.root}>
            <Grid
              container
              spacing={16}
              className={classes.demo}
              alignItems={this.state.alignItems}
              direction={this.state.direction}
              justify={this.state.justify}
            >
            <Hidden xsDown>
              <Grid 
              item 
              lg={2} 
              md={4} 
              style={{
                width: '100%', 
                maxWidth: 280, 
                minWidth: 0, 
                position: 'fixed', 
                height: '100%', 
                zIndex: 1,
              }}>
                <Categories showFull={this.updateState} />
              </Grid>
            </Hidden>
              <Grid container item lg={12} md={12} spacing={16} 
                style={{paddingLeft: this.state.hidden ? 0 : 300, zIndex: 3}}
              >
                {news}
              </Grid>
            </Grid>
      </Grid>
  </div>
  );
...