レンダリングされたReactコンポーネントに正確に収まるようにコンテナdivのサイズを調整します。

場合によってはスタイルと位置が決定されるコンポーネントをレンダリングしようとしています。これを行うために、私はボディ全体を占めるコンテナ内にそれをレンダリングし、コンポーネントがその内部を移動します。その代わりに、コンテナのスタイルがコンポーネントのスタイルと同じであることを確認する方法はありますか？私はコンテナが全身を占有することを望んでいません、私はそれがコンポーネントを占有したいだけです。レンダリングされたReactコンポーネントに正確に収まるようにコンテナdivのサイズを調整します。

コード：

var componentStyle; 
//cases 
componentStyle = {}; //some css properties 
var MyComponent = React.createClass({ 
render: function(){ 
return(
<div style = {componentStyle}>Some content</div> 
) 
} 
}) 
    var container = document.createElement("div"); 
container.id = "container"; 
document.body.appendChild(container); 
ReactDOM.render(<MyComponent/>,container);

コンテナのCSS：

#container { 
    position: absolute; 
    top:0;left: 0; 
    font-family: Arial, Helvetica, sans; 
    background: transparent; 
    height: 100%; 
    width: 100%; 
    z-index:9999999; 
}

出典

2016-08-26 Vishnu Paspunoor

あなたは、コンテナ '' inline'にdisplay'プロパティを設定することができますを参照してください。これにより、コンテナは内容の幅と高さを占めるようになります。 – z0mBi3

これは、より多くのCSSの問題ではなく、リアクト問題のようです。

コンテナが全身を占めないようにするには、CSSでwidth: 100%を削除する必要があります。

<body> 
    <div id="conatainer"> 
    <Children /> 
    </div> 
</body>

そして、あなたはそれがコンポーネントを占めるようにしたい場合は、CSSは

#container { 
    display: table; 
}

または

（デフォルトでは、余分なマージンを追加する必要があります：（私はあなたのDOM構造のようなものであると仮定します）

#container { 
    display: inline-block; 
}

または

のみCSS3で

#container { 
    width: fit-content; 
    /* To adjust the height as well */ 
    height: fit-content; 
}

または

だけCSS3。

#container { 
    width: intrinsic; 
}

は詳細here

出典

2016-08-26 11:06:20 chh

レンダリングされたReactコンポーネントに正確に収まるようにコンテナdivのサイズを調整します。

答えて

関連する問題