查找反應組件中身體內容的高度

如果我有一個包含頭 - > body - > footer的包裹，我如何計算正文內容的高度。查找反應組件中身體內容的高度

我已經建立了我的包裝像這樣：

var DefaultWrapper = React.createClass({ 
render: function() { 
    return <div> 
     <Header currentPage={this.props.children.type.displayName} /> 
     {this.props.children} 
     <Footer position={this.state.position} /> 
    </div> 
    } 
});

我想計算任何組件的高度/頁被添加到this.props.children。

來源

2016-01-20 ogk

您需要等到更改刷新到DOM。根據React DOC（https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate），它將是生命週期函數componentDidUpdate: function() {...}。

注意，初始渲染componentDidUpdate: function() {...}沒有代替叫componentDidMount: function() {...}

在這個函數中，您可以訪問您的頁眉和頁腳之間的DOM的元素反應組件和簡單地得到它的高度（例如使用jQuery或'offsetHeight'）。

下面的例子：

var DefaultWrapper = React.createClass({ 
render: function() { 
    return <div> 
     <Header currentPage={this.props.children.type.displayName} /> 
     <div ref='content'> 
     {this.props.children} 
     </div> 
     <Footer position={this.state.position} /> 
    </div> 
    }, 
componentDidUpdate: function() { 
    // do whatever you want 
    var heightOfContent = this.getContentHeight(); 
    }, 
componentDidMount: function() { 
    // on your first render componentDidMount is called instead 
    // of componentDidUpdate 

    var heightOfContent = this.getContentHeight(); 
    // do whatever you want 
    }, 
getContentHeight: function() { 
    // get the DOM element of the content and get its height 
    return this.refs.content.offsetHeight 
    } 
});

關當然，你也可以直接跳過裁判和簡單地增加一個id屬性並訪問DOM的元素用純JS或jQuery的

來源

2016-01-20 01:47:30 gonzochic

查找反應組件中身體內容的高度

回答

相關問題