React'te otomatik olarak boyutlandırılan bir DOM öğesinin genişliğine nasıl yanıt verebilirim?

React bileşenlerini kullanan karmaşık bir web sayfam var ve sayfayı statik bir düzenden daha duyarlı, yeniden boyutlandırılabilir bir düzene dönüştürmeye çalışıyorum. Ancak, React ile ilgili sınırlamalarla karşılaşmaya devam ediyorum ve bu sorunların üstesinden gelmek için standart bir model olup olmadığını merak ediyorum. Benim özel durumumda, display: table-cell ve width: auto ile bir div olarak işlenen bir bileşene sahibim.

Ne yazık ki, bileşenimin genişliğini sorgulayamıyorum, çünkü gerçekten DOM'a yerleştirilmediği sürece bir öğenin boyutunu hesaplayamazsınız (gerçek oluşturulan genişliğin çıkarılacağı tam bağlama sahiptir). Bunu göreceli fare konumlandırma gibi şeyler için kullanmanın yanı sıra, bileşenin içindeki SVG öğelerinde genişlik özelliklerini doğru şekilde ayarlamak için buna ihtiyacım var.

Ek olarak, pencere yeniden boyutlandırıldığında, kurulum sırasında boyut değişikliklerini bir bileşenden diğerine nasıl iletebilirim? ShouldComponentUpdate içinde tüm 3. taraf SVG oluşturmayı yapıyoruz, ancak bu yöntemde kendiniz veya diğer alt bileşenler için durum veya özellikler ayarlayamazsınız.

React'i kullanarak bu problemi çözmenin standart bir yolu var mı?

En pratik çözüm bunun için react-measure gibi bir kitaplık kullanmaktır .

Güncelleme : Artık yeniden boyutlandırma tespiti için özel bir kanca var (şahsen denemedim): react-yeniden boyutlandırmaya duyarlı . Özel bir kanca olduğundan, kullanmaktan daha uygun görünüyor react-measure.

import * as React from 'react'
import Measure from 'react-measure'

const MeasuredComp = () => (
  <Measure bounds>
    {({ measureRef, contentRect: { bounds: { width }} }) => (
      <div ref={measureRef}>My width is {width}</div>
    )}
  </Measure>
)

Bileşenler arasında boyut değişikliklerini bildirmek için, bir onResize geri aramayı ve aldığı değerleri bir yerde saklayabilirsiniz (bugünlerde durumu paylaşmanın standart yolu Redux kullanmaktır ):

import * as React from 'react'
import Measure from 'react-measure'
import { useSelector, useDispatch } from 'react-redux'
import { setMyCompWidth } from './actions' // some action that stores width in somewhere in redux state

export default function MyComp(props) {
  const width = useSelector(state => state.myCompWidth) 
  const dispatch = useDispatch()
  const handleResize = React.useCallback(
    (({ contentRect })) => dispatch(setMyCompWidth(contentRect.bounds.width)),
    [dispatch]
  )

  return (
    <Measure bounds onResize={handleResize}>
      {({ measureRef }) => (
        <div ref={measureRef}>MyComp width is {width}</div>
      )}
    </Measure>
  )
}

Aşağıdakileri gerçekten tercih ediyorsanız, kendiniz nasıl yuvarlayabilirsiniz:

DOM'dan değer almayı ve pencere yeniden boyutlandırma olaylarını dinlemeyi (veya bileşen yeniden boyutlandırma algılamasını kullanan) işleyen bir sarmalayıcı bileşeni oluşturun. react-measure ) . DOM'dan hangi sahne öğelerinin alınacağını söyleyin ve bu aksesuarları çocukken alan bir oluşturma işlevi sağlayın.

DOM props okunmadan önce oluşturduğunuz şeyin bağlanması gerekir; Bu aksesuarlar ilk oluşturma sırasında kullanılamadığında style={{visibility: 'hidden'}}, kullanıcının JS ile hesaplanan bir düzen almadan önce görmemesi için kullanmak isteyebilirsiniz .

// @flow

import React, {Component} from 'react';
import shallowEqual from 'shallowequal';
import throttle from 'lodash.throttle';

type DefaultProps = {
  component: ReactClass<any>,
};

type Props = {
  domProps?: Array<string>,
  computedStyleProps?: Array<string>,
  children: (state: State) => ?React.Element<any>,
  component: ReactClass<any>,
};

type State = {
  remeasure: () => void,
  computedStyle?: Object,
  [domProp: string]: any,
};

export default class Responsive extends Component<DefaultProps,Props,State> {
  static defaultProps = {
    component: 'div',
  };

  remeasure: () => void = throttle(() => {
    const {root} = this;
    if (!root) return;
    const {domProps, computedStyleProps} = this.props;
    const nextState: $Shape<State> = {};
    if (domProps) domProps.forEach(prop => nextState[prop] = root[prop]);
    if (computedStyleProps) {
      nextState.computedStyle = {};
      const computedStyle = getComputedStyle(root);
      computedStyleProps.forEach(prop => 
        nextState.computedStyle[prop] = computedStyle[prop]
      );
    }
    this.setState(nextState);
  }, 500);
  // put remeasure in state just so that it gets passed to child 
  // function along with computedStyle and domProps
  state: State = {remeasure: this.remeasure};
  root: ?Object;

  componentDidMount() {
    this.remeasure();
    this.remeasure.flush();
    window.addEventListener('resize', this.remeasure);
  }
  componentWillReceiveProps(nextProps: Props) {
    if (!shallowEqual(this.props.domProps, nextProps.domProps) || 
        !shallowEqual(this.props.computedStyleProps, nextProps.computedStyleProps)) {
      this.remeasure();
    }
  }
  componentWillUnmount() {
    this.remeasure.cancel();
    window.removeEventListener('resize', this.remeasure);
  }
  render(): ?React.Element<any> {
    const {props: {children, component: Comp}, state} = this;
    return <Comp ref={c => this.root = c} children={children(state)}/>;
  }
}

Bununla genişlik değişikliklerine yanıt vermek çok basittir:

function renderColumns(numColumns: number): React.Element<any> {
  ...
}
const responsiveView = (
  <Responsive domProps={['offsetWidth']}>
    {({offsetWidth}: {offsetWidth: number}): ?React.Element<any> => {
      if (!offsetWidth) return null;
      const numColumns = Math.max(1, Math.floor(offsetWidth / 200));
      return renderColumns(numColumns);
    }}
  </Responsive>
);

Bence aradığınız yaşam döngüsü yöntemi componentDidMount. Öğeler zaten DOM'a yerleştirilmiştir ve bunlar hakkında bileşenden bilgi alabilirsiniz refs.

Örneğin:

var Container = React.createComponent({

  componentDidMount: function () {
    // if using React < 0.14, use this.refs.svg.getDOMNode().offsetWidth
    var width = this.refs.svg.offsetWidth;
  },

  render: function () {
    <svg ref="svg" />
  }

});

Couchand çözümüne alternatif olarak findDOMNode'u kullanabilirsiniz.

var Container = React.createComponent({

  componentDidMount: function () {
    var width = React.findDOMNode(this).offsetWidth;
  },

  render: function () {
    <svg />
  }
});

I kütüphanesini kullanabilirsiniz, hangi bileşenlerin oluşturulmuş boyutunu izler ve size iletir.

Örneğin:

import SizeMe from 'react-sizeme';

class MySVG extends Component {
  render() {
    // A size prop is passed into your component by my library.
    const { width, height } = this.props.size;

    return (
     <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
     </svg>
    );
  }
} 

// Wrap your component export with my library.
export default SizeMe()(MySVG);   

Demo: https://react-sizeme-example-esbefmsitg.now.sh/

Github: https://github.com/ctrlplusb/react-sizeme

Benden çok daha zeki insanlardan ödünç aldığım optimize edilmiş kaydırma / nesne tabanlı bir algoritma kullanıyor. :)