React根據視口尺寸有條件地渲染

Question

對於你來說，這應該是一件容易的事情了React怪物。 :)我有條件編寫，但我無法弄清楚如何在我的構造函數中處理視口大小以使條件生效。簡單而簡單，我想在視口大小爲1451px或更寬時顯示一個元素，而當1450px或更小時顯示另一個元素。

這是我的代碼（簡化）

class My Class extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isDesktop: "1450px" //This is where I am having problems 
     }; 
    } 

    render() { 
     const isDesktop = this.state.isDesktop; 

     return (
      <div> 
       {isDesktop ? (
        <div>I show on 1451px or higher</div> 
       ) : (
        <div>I show on 1450px or lower</div> 
       )} 
      </div> 
     ); 
    } 
} 

也許我suppposed與ComponentWillMount或ComponentDidMount上班吧。老實說，不確定。我是React新手。

在此先感謝球員。

Answer 1

也許我suppposed與ComponentWillMount或上班吧ComponentDidMount

是的，你要聽的resize事件和變化更新內部狀態。您可以通過在組件掛載時添加事件處理程序來完成此操作。嘗試完整示例here。

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isDesktop: false //This is where I am having problems 
    }; 

    this.updatePredicate = this.updatePredicate.bind(this); 
    } 
    componentDidMount() { 
    this.updatePredicate(); 
    window.addEventListener("resize", this.updatePredicate); 
    } 

    componentWillUnmount() { 
    window.removeEventListener("resize", this.updatePredicate); 
    } 

    updatePredicate() { 
    this.setState({ isDesktop: window.innerWidth > 1450 }); 
    } 

    render() { 
    const isDesktop = this.state.isDesktop; 

    return (
     <div> 
     {isDesktop ? (
      <div>I show on 1451px or higher</div> 
     ) : (
      <div>I show on 1450px or lower</div> 
     )} 
     </div> 
    ); 
    } 
} 

Answer 2

class My Class extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isDesktop: window.innerHeight > 1450, 
     }; 
    } 

    render() { 
     const isDesktop = this.state.isDesktop; 

     return (
      <div> 
       {isDesktop ? (
        <div>I show on 1451px or higher</div> 
      ) : (
        <div>I show on 1450px or lower</div> 
      )} 
      </div> 
    ); 
    }} 

這裏更多信息Get viewport/window height in ReactJS