reactjsコンポーネントをブラウザにスケールする方法

Question

すでに作成された高さと幅が既に定義されている反応コンポーネントを、あらかじめ定義しておくと、どのようにスケールするのですか？これは行くための正しい方法であれば

componentDidMount(x,y,z){ 
this.setState({height:window.innerHeight+'px'}); 
} 

わからない、私はビューポートのサイズ最初番目取得する必要がありますし、後で以降のブラウザに拡張しようとした場合わかりません。どのように達成することができますか？

Answer 1

DOMエレメントにスタイルを直接割り当てることができます。

render() { 
    return <div style={{ height: window.innerHeight }} />; 
} 

あなたが最初のレンダリング後のスタイルを計算する必要がある場合は、おそらくいくつかのユーザーとの対話の後、あなたは状態のスタイルを計算し、保存することもできます：たとえば

// ... calculate and set state logic somewhere 
// eg: someFunction() { this.setState({ height: window.innerHeight }); } 
render() { 
    let styles = {}; 
    if (this.state.height) { 
     styles.height = this.state.height; 
    } 

    return <div style={styles} />; 
}