React设置一个元素，其中一个className的min-height等于具有另一个className的min-height的元素

Question

我有一个带有两个<div>标记的React组件，每个标记都有不同的classNames，我们可以说：className="firstClass"和className="secondClass"。

如何将min-height的{​​{1}}值设置为secondClass的{​​{1}}值？

Answer 1

不要直接设置DOM。您需要阅读setState和props。

setState会触发重新渲染，因此每当您执行this.setState({minHeight: newValueHere});时，它都会自动使用新值更新渲染方法。

class Component extends React.Component {
    constructor() {
        super();

        this.state = {
            minHeight: "600px"
        };
    }
    render() {
        return (
        <div>
            <div className="firstClass" style={{minHeight: this.state.minHeight}} />
            <div className="secondClass" style={{minHeight: this.state.minHeight}} />
        </div>
        );
    }
}