挂载后获取 ReactJs 组件宽度

Question

我正在使用 react-leaflet 地图来显示自定义地图（非地理）此外，地图大小是动态的，我需要根据组件和地图大小之间的比率来计算缩放级别。

有没有reactJs原生的方法来计算加载的组件大小？

Answer 1

您可以获得对组件的基础 DOM 元素的引用。从那里您可以获得所需的渲染尺寸信息。有关详细信息，请参阅 React 文档中的 Refs and the DOM。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clientRect: {},
    };
  }

  ref = node => node && this.setState({clientRect: node.getBoundingClientRect()});

  render() {
    return(
      <div
        style={{ width: '50px', height: '50px' }}
        ref={this.ref}
      >
        {JSON.stringify(this.state.clientRect)}
  </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

我会将你的组件包裹在一个 div 中，包裹你的 react-leaflet。

<div
  style={{display: 'inline'}}
>
  ... your leaflet
</div>

并按照@trixn 的建议添加参考。注意：您的组件必须是有状态的才能使用 Refs。

<div
  style={{display: 'inline'}}
  ref={leaflet => { this.leaflet = leaflet } }
>
  ... your leaflet
</div>

然后create/modifycomponentDidMount()生命周期方法：

componentDidMount() {
  console.log(this.leaflet.offsetWidth); // Rounded value of the width
}

Answer 3

您可以做的是将您的组件放在 div 中，样式为 100% 宽度和高度，然后检索实际尺寸。

因此在您的包装器组件中您将拥有：

getDimensions = () => {
    if (!this.contentDiv) return;
    const rect = this.contentDiv.getBoundingClientRect();
    console.log(rect.width);
    console.log(rect.height);
};

并在渲染方法中

<div
    ref={ref => {
        this.contentDiv = ref;
    }}
    style={{ width: "100%", height: "100%" }}
>
    {content}
</div>

挂载后获取 ReactJs 组件宽度

Get ReactJs component width after mount

width

reactjs

react-leaflet