Question

如果屏幕上不适合显示其他数据，请隐藏它。

我做了一个可行的例子，但我认为这不是正确/优雅的方法。

也许有人可以向我展示更好的方法？

我在Codepen中制作的示例图片。 1.我想隐藏第一个红色块，如果它不适合灰色。

我不想在窗口大小的媒体查询中执行此操作，因为我的红色块的大小可能因用户而异。

Codepen示例（调整大小以隐藏块）：https://codepen.io/bofemptiness/pen/YJRKGj

const styled = styled.default
const Component = React.Component;

const DivHat = styled.div`
    position: fixed;
    top: 0;
    width: 100% ;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
`


const DivProfile = styled.div`
        display: flex;
        height: 100%;
        cursor: pointer;
    `
const ExpCooDiv = styled.div`
        display: flex;
        flex-direction: column;
        font-size: 1rem;
`



class App extends Component {
      constructor(props) {
        super(props)

        this.state = { showCookies: true, lvlRefLastSize: 0 }
        this.statsRef = React.createRef()
        this.cocRef = React.createRef()
        this.lvlRef = React.createRef()

        this.mediaStats = this.mediaStats.bind(this);
    }

      componentDidMount() {
        // Add listner when window resizes
        window.addEventListener('resize', this.mediaStats)

        // Activate function at least one time on load
        this.mediaStats()
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.mediaStats)
    }


    // Show/hide first red block if summ of red blocks widths <= width of grey one
    mediaStats = () => {
      console.log(this.statsRef.current.scrollWidth)
        if (this.lvlRef.current.scrollWidth != 0) 
            this.setState({ lvlRefLastSize: this.lvlRef.current.scrollWidth })

        if (this.statsRef.current.scrollWidth <= this.state.lvlRefLastSize + this.cocRef.current.scrollWidth) {
            this.setState({ showCookies: false })
        } else {
            this.setState({ showCookies: true })
        }
    }


 render () {
   return(
   <DivHat>
       <div>Menu</div>
                <div id='test' ref={this.statsRef}>
                    <div ref={this.lvlRef} id='test2'>
                        {this.state.showCookies &&
                            <React.Fragment>
                          <span>DATA that i hide</span>
                            </React.Fragment>
                        }
                    </div>
                    <div ref={this.cocRef} id='test2'>
                        ANOTHER DATA
                    </div>

                </div>

                <DivProfile >
                    <div> Profile </div>
                </DivProfile>

            </DivHat>
   )
 }
}

ReactDOM.render(<App />, document.getElementById('app'))

在调整大小时更改内容的优雅方法是什么？

0 个答案: