Реагируйте, чтобы установить элемент с min-height одного className равным элементу с min-height другого className

Question

У меня есть компонент React с двумя <div> теги каждый с разными classNames скажем так: className="firstClass" а также className="secondClass",

Как я могу установить min-height ценность secondClass чтобы равняться min-height ценность firstClass?

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>
        );
    }
}