Question

说我有这样的元素：

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问题。

实现这一目标的最佳方式是什么？

Answer 1

您可以尝试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;
}

sizejs

1 个答案: