Question

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

是否有reactJs本地方法来计算加载的组件大小？

Answer 1

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

＆＃13;

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'));

＆＃13;

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

＆＃13;

Answer 2

我会将你的组件包裹在一个包裹你的反应传单的div内。

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

并添加一个Ref，正如@trixn建议的那样。注意：您的组件必须是有状态才能使用Refs。

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

然后创建/修改componentDidMount()生命周期方法：

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

Answer 3

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

所以在你的包装器组件中你会得到：

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组件宽度

3 个答案: