文章/答案/技术大牛

发布

社区首页 >问答首页 >调整容器div的大小以精确地适应渲染的React组件

问调整容器div的大小以精确地适应渲染的React组件
EN

Stack Overflow用户

提问于 2016-08-26 17:51:58

回答 1查看 23.9K关注 0票数 3

我正在尝试渲染一个组件，它的样式和位置是根据某些情况确定的。为了做到这一点，我在一个容器中渲染它，这个容器占据了整个身体，组件在里面移动。而不是这样做，如何确保容器的样式与组件的样式相同？我不想让容器占据整个身体，我只想让它占据组件。

代码：

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

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-26 19:06:20

这更像是CSS问题，而不是React问题。

如果你不想容器占据整个身体，你应该在你的CSS中删除width: 100%。(我假设您的DOM结构类似于：

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

如果你想让它占用组件，css应该是

#container {
  display: table;
}

或

(默认情况下会添加额外的边距)

#container {
  display: inline-block;
}

或

仅限于CSS3

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

或

也仅限CSS3。

#container {
  width: intrinsic;
}

查看更多详细信息here

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39163445

复制

相似问题

问调整容器div的大小以精确地适应渲染的React组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整容器div的大小以精确地适应渲染的React组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整容器div的大小以精确地适应渲染的React组件
EN