Question

我正在尝试渲染一个基于某些情况确定其样式和位置的组件。为了做到这一点，我将它呈现在占据整个身体并且组件在其内部移动的容器中。而不是这样做，如何确保容器的样式与组件的样式相同？我不希望容器占据整个身体，我只希望它占据组件。

代码：

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

Answer 1

这更像是一个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

调整容器div的大小以完全适合渲染的React组件

1 个答案: