Question

这甚至可能（标题）吗？我需要它，因为在CSS中，@ media规则需要更改某些元素的CSS。 CSS部分有效。发生问题是因为需要重新排列反应组件。我有（全部）通过的这些条件。应该是，当调整窗口大小时，将应用css，并在获取窗口宽度之后，随着css的更改重新排列组件。我在构造函数中有这个

this.myInput = React.createRef();

这：

componentDidMount () {
        this.setState({
            myWidth: this.state.myWidth=this.myInput.current.offsetWidth
        });
    }

，并且在Render（）中是这样的：

render(){

    const btnText = this.state.erase ? "Populate" : "Erase" ;
    const handleClick = e => this.fullScreen(e.target.id);

    const EditorHead1 = <EditorHead id={"item1"} style={this.state.stilEditor} className={this.state.headEdKlasa} onClick={handleClick} title={this.state.attr}/>;
    const PreviewHead1 = <PreviewHead id={"item2"} style={this.state.stilPreview} className={this.state.headViewKlasa} onClick={handleClick} title={this.state.attr}/>;
    const BtnEraser1 = <BtnEraser id={"eraser"} onClick={this.eraseFields} type={"button"} className={"btn btn-danger btn-lg"} title={"Erase & populate both fields"} value={btnText}/>;
    const Editor1 = <Editor id={"editor"} onChange={this.handleChange} className={this.state.editorKlasa} value={this.state.markdown} placeholder={"Enter ... some kind a text!? ..."} title={"This is rather obvious isnt it? Its editor window Sherlock :D"}/>;
    const Preview1 = <Preview id={"preview"} className={this.state.previewKlasa} dangerouslySetInnerHTML={{__html: marked(this.state.markdown, { renderer: renderer })}} title={"Its a preview window, Sherlock ;)"}/>;
    const Arrow1 = <Arrow id={"arrow"}/>;

    if(this.state.myWidth<=768){
        alert("Alternative");
        alert(this.state.myWidth);
        return (

            <div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}>

                {EditorHead1}
                {Editor1}
                {PreviewHead1}
                {Preview1}
                {BtnEraser1}
                {Arrow1}

            </div>

        );
    }
    if(this.state.myWidth>768){
        alert("Normal");
        alert(this.state.myWidth);
        return (

            <div id="inner2" ref={this.myInput} className="grid-container animated zoomIn" style={{height: this.state.inner2H}} onDoubleClick={this.inner2Height}>

                {EditorHead1}
                {PreviewHead1}
                {BtnEraser1}
                {Editor1}
                {Preview1}
                {Arrow1}

            </div>

        );
    }
    }

当前重新排列仅在调整大小后刷新浏览器或再次“运行” codepen时有效。

Answer 1

resize事件应被监听，以跟踪元素宽度的变化。最好为经常触发的事件消除事件处理程序的抖动，resize是：

import debounce from 'lodash.debounce';

...

myInput = React.createRef();

setMyWidth = () => {
    this.setState({
      myWidth: this.myInput.current.offsetWidth
  });
}

onResize = debounce(this.setMyWidth, 100);

componentDidMount() {
  this.setMyWidth();
  window.addEventListener('resize', this.onResize);

}

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

根据元素offsetWidth是什么，元素引用可能是多余的，可以跟踪document.body.clientWidth。

此外，this.state.myWidth=...是一个错误，this.state不应在组件构造函数外部直接更改。

重新调整组件大小

1 个答案: