特定のclassNameを持つ要素の反作用最小高さプロパティ

Question

私は、componentDidMount()' I want to set the最小高さproperty of an element where className = "content-wrapper" to '600px'にあるリアクションコンポーネントを持っています。

私は次のことを試してみました：

残念ながら

componentDidMount() { 
    document.getElementsByClassName('content-wrapper').style.minHeight = "600px" 
} 

次のエラーが発生していること：

Uncaught TypeError: Cannot set property 'minHeight' of undefined

at MyComponent.componentDidMount

が、私はまだリアクトのこつを取得していますし、これを達成するために可能な任意の助けをいただければ幸いですゴール。ありがとう！

Answer 1

あなたはコンテンツラッパーの作成方法をまだ投稿していません。

あなたはこのようなものでした場合：

class Component extends React.Component { 
    render() { 
     return <div className="content-wrapper"/> 
    } 
} 

を反応させるのは、最後のレンダリング以降に変更されたかを確認するために、仮想DOMを使用しているため、その後、DOMを変更すると、直接（それが動作していても）リアクト反します。したがって、DOMを直接変更すると、Reactは以前の仮想DOMを見ているため何も変更されていないため、これらの変更を上書きします。

代わりにあなたが必要になります。

class Component extends React.Component { 
    componentDidMount() { 
     this.setState({conentWrapperMinHeight: "600px"}) 
    } 
    render() { 
     return <div className="content-wrapper" style={{minHeight: this.state.conentWrapperMinHeight}} /> 
} 
} 

あなただけの1つのdivのためにそれを行うか、動的コンテンツ・ラッパーにクラスを追加して600PXにCSSでminHeightのを設定することができれば、あなただけで600PXをハードコーディングできます。あなたが複数のコンポーネントに変更したいというコンテンツ・ラッパーのdivのマルチを使用している場合

は、あなたは、より高いコンポーネントにlift the state upに必要と小道具としてそれを渡すか、彼らは完全に無関係である場合にReduxのか、フラックスを使用します。

Answer 2

要素を取得し、繰り返し、スタイルを設定します。

componentDidMount() { 
    document.querySelectorAll('.content-wrapper').forEach(el => el.style.minHeight = '600px'); 
}