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;

我的目标是定义元素的高度＆＃34;输出＆＃34;通过这种方式：100％ - this.state.height。

Answer 1

自定义组件上的引用返回组件实例，而不是dom节点

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

Answer 2

setState是异步的，您的状态将在调用后以某种方式正确更新。然后再次调用render。尝试在渲染或componentWillUpdate中检查新状态：https://facebook.github.io/react/docs/react-component.html#componentwillupdate

改变你的状态后，你永远不应该在你的州内寻找改变。

只需将outputStyle.height设置为this.state.height就可以了。

如何获得reactjs中元素的高度？

2 个答案: