说我有这样的元素:
export default class DemoAxis extends Component {
componentDidMount() {
const el = findDOMNode(this);
this.dimensions = getDimensionsFromNode(el);
}
render() {
const style = {
parent: {border: "1px solid #ccc", margin: "2%", maxWidth: "40%", padding: 10}
};
return (
<div ref="line">
<svg style={style} width={this.dimensions.width} height={this.dimensions.height}
我想根据线元素的尺寸调整svg
元素的大小。
元素的维度仅在渲染后调用的componentDidMount
中可用。
我知道我可以致电setState
,但这会导致重新渲染,这可能会给我带来UI问题。
实现这一目标的最佳方式是什么?
答案 0 :(得分:0)
您可以尝试react-dimensions
包装react组件并添加属性containerHeight和containerWidth。对响应式设计很有用。窗口调整大小时属性更新。请注意,父元素必须具有高度或宽度,否则将不会呈现任何内容
<div>
<h1 id="h1">TEXT</h1>
<a href="#" id="Btn" class="button">Btn</a>
</div>
<div>
<h1 id="h2">TEXT</h1>
<a href="#" id="Btn2" class="button">Btn2</a>
</div>
<div>
<h1 id="h3">TEXT</h1>
<a href="#" id="Btn2" class="button">Btn3</a>
</div>
h1 {
display: inline;
}