が反応応答性のconstとして使用する方法

Question

私はreact.jsで新たなんだと私はhttps://github.com/contra/react-responsive

だから、使用して私の最初のアプリにいくつかの応答機能を追加しようとしている、それは私がとそれをクールに使用することができます私のコンテンツへのラッパー

<MediaQuery maxDeviceWidth={767}> 
    this will shown only on mobile 
</MediaQuery> 

しかし、私はいくつかの定数のようなこの機能を使用するいくつかの魔法を行うことができますか？

const isMobile = MediaQuery < 768; 
return <div className={isMobile ? "mobile" : "desktop"} 

ありがとうございました！

Answer 1

ありませんが、私はあなただけではなく、ウィンドウ幅を使用することができたとします

const isMobile = window.innerWidth < 768; 
return <div className={ isMobile ? "mobile" : "desktop" }></div>; 

サイズ変更ウィンドウでこれを更新したい場合は、それにもう少しがあります。

isMobileの値をコンポーネントの状態に保ち、ウィンドウのサイズが変更されたときに状態を更新して、コンポーネントの再レンダリングを実行する必要があります。その後、あなたはおそらくCSSメディアクエリを使用して最高のでしょうけれども、それはCSSクラスを設定するだけだ場合、

class MyComponent extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isMobile: window.innerWidth < 768 
     }; 
    } 

    updateIsMobile() { 
     this.setState({ 
      isMobile: window.innerWidth < 768 
     }); 
    } 

    componentDidMount() { 
     window.addEventListener('resize', this.updateIsMobile); 
    } 

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

    render() { 
     return <div className={ this.state.isMobile ? "mobile" : "desktop" }></div> 
    } 

} 

しかし：

あなたはこのようなものが必要でしょう。ドキュメントを見ると

Answer 2

、あなたがこれを行うことができます：

return (
    <MediaQuery maxDeviceWidth={767}> 
     {isMobile => (
      <div className={isMobile ? 'mobile' : 'desktop'> 
      </div> 
     )} 
    </MediaQuery> 
); 

子供が機能している場合、この関数は本当の子供を生成するために使用されます。