Получить ширину компонента ReactJs после монтирования

Я использую карту реагирования-листовки для отображения пользовательской карты (не географической). Кроме того, размер карты является динамическим, и мне нужно рассчитать уровень масштабирования в зависимости от соотношения между размером компонента и карты.

Есть ли собственный способ reactJs для расчета размера загруженного компонента?


reactjs react-leaflet width
person Stevan Tosic    schedule 11.01.2018    source источник
comment
Если вы используете полноэкранную карту, это может помочь вам npmjs.com/package/react-window -размеры   -  person Scott Chambers    schedule 11.01.2018
comment
Нет, это будет карта на странице, отображаемая в компоненте. Но я проверю эту ссылку.   -  person Stevan Tosic    schedule 11.01.2018
comment
Вы могли бы, конечно, из карты в div? А затем получите такие размеры, как var div = $(#myDiv); (.height(): + div.height()); разве что это невозможно   -  person Scott Chambers    schedule 11.01.2018
comment
Вы можете использовать меру реагирования, проверьте это: github.com/souporserious/react-measure   -  person Fawaz    schedule 11.01.2018

Ответы (3)


arrow_upward
2
arrow_downward

Я бы обернул ваш компонент внутри div, который оборачивает ваш реагирующий листок.

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

И добавьте ссылку, как предложил @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
}
person Dan    schedule 11.01.2018

arrow_upward
2
arrow_downward

Вы можете получить ссылку на базовый элемент DOM компонента. Оттуда вы можете получить необходимую информацию о отображаемом размере. Подробнее см. Refs и 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>

person trixn    schedule 11.01.2018

arrow_upward
1
arrow_downward

Что вы можете сделать, так это поместить свой компонент в 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>
person Carlo    schedule 11.01.2018