如何獲取reactjs中元素的高度？

Question

如何獲取reactjs中元素的高度以便在其他元素的樣式中使用它？

我的代碼有什麼問題？

import React, { Component } from 'react'; 

import TextField from 'material-ui/TextField'; 

class Messages extends Component { 

    constructor(props) { 
     super(props) 

     this.state = { 
      height: 0 
     } 
    } 

    componentDidMount() { 
     const height = this.input.clientHeight; 
     this.setState({ height: height }); 
    } 

    render() { 
     const outputStyle = { 
      overflowY:'scroll', 
      height:`calc(100%-${this.state.height})` 
     }; 

     const inputStyle = { 
      position:'fixed', 
      bottom:'0', 
      height:'auto' 
     }; 

     return (
      <div style={{height:'100%'}}> 
       <div name="output" style={outputStyle}/> 
       <TextField name="input" multiLine={true} fullWidth={true} underlineShow={false} style={inputStyle} rows={2} ref={(input) => {this.input = input;}} /> 
      </div> 
     ); 
    } 
} 

export default Messages; 

我的目標是通過這種方式定義元素「輸出」的高度：100％ - this.state.height。

Answer 1

setState是異步的，您的狀態將在調用後以某種方式正確更新。然後渲染將被再次調用。嘗試在渲染或componentWillUpdate中檢查新狀態：https://facebook.github.io/react/docs/react-component.html#componentwillupdate

在更改狀態後，不應該立即在狀態中查找更改。

只需將outputStyle.height設置爲this.state.height，您應該很好。

Answer 2

上的自定義部件的Ref返回組件實例，而不是一個DOM節點

我必須使用：ReactDOM.findDOMNode（this.input）.clientHeight;