Question

我想知道Hidden什么时候起作用。我有两个组件，类别和新闻。

当屏幕分辨率为xsUp时，我想显示两者。当类别可见时，新闻组件paddingLeft = categiries.Width，但xsDown我想隐藏类别网格和新闻组件paddingLeft使其为0。

这是它的工作原理。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
"<span class="subTitle">
  <span class="attributeTitleContainer">
    <strong><a class="Attribute" href="#">Location</a></strong>: 
    <span class="attributeTitleValue"> "Chennai"</span>
<span class="titleSeparator"> => </span>
</span>
<span class="attributeTitleContainer">
    <strong><a class="Attribute" href="#">Designation</a></strong>:    <span class="attributeTitleValue"> "Senior Graphic Artist"</span>
<span class="titleSeparator"> => </span>
</span>
<span>END</span>
</span>

Answer 1

我自己找到了简单的解决方案。我将我的函数发送给Categories组件，当Component didMounted或willUnmounted时，我发送布尔发生的事情。

这样的事情： 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>
  );

组件被隐藏时如何捕获？

1 个答案: