मैं प्रतिक्रिया में ऑटो-आकार डोम तत्व की चौड़ाई का जवाब कैसे दे सकता हूं?

Question 1

मेरे पास एक जटिल वेब पेज है जो रिएक्ट घटकों का उपयोग कर रहा है, और मैं पृष्ठ को स्थिर लेआउट से अधिक उत्तरदायी, पुनरुत्थानित लेआउट में बदलने की कोशिश कर रहा हूं। हालाँकि, मैं प्रतिक्रिया के साथ सीमाओं में चलता रहता हूं, और सोच रहा हूं कि क्या इन मुद्दों से निपटने के लिए कोई मानक पैटर्न है। मेरे विशिष्ट मामले में, मेरे पास एक घटक है जो डिस्प्ले के साथ डिव के रूप में प्रस्तुत होता है: टेबल-सेल और चौड़ाई: ऑटो।

दुर्भाग्य से, मैं अपने घटक की चौड़ाई को क्वेरी नहीं कर सकता, क्योंकि आप किसी तत्व के आकार की गणना नहीं कर सकते हैं जब तक कि इसे वास्तव में डोम में नहीं रखा गया हो (जिसमें पूर्ण संदर्भ है जिसके साथ वास्तविक प्रदान की गई चौड़ाई को कम करना है)। रिश्तेदार माउस पोजिशनिंग जैसी चीजों के लिए इसका उपयोग करने के अलावा, मुझे घटक के भीतर SVG तत्वों पर चौड़ाई विशेषताओं को ठीक से सेट करने के लिए भी इसकी आवश्यकता है।

इसके अलावा, जब विंडो आकार बदलती है, तो मैं सेटअप के दौरान एक घटक से दूसरे में आकार में परिवर्तन कैसे संवाद करूं? हम अपने सभी 3-पार्टी SVG रेंडरिंग को shouldComponentUpdate में कर रहे हैं, लेकिन आप उस विधि के भीतर स्वयं या अन्य चाइल्ड घटकों पर स्थिति या गुण सेट नहीं कर सकते।

प्रतिक्रिया का उपयोग करके इस समस्या से निपटने का एक मानक तरीका है?

Question 2

सबसे व्यावहारिक समाधान इसके लिए एक पुस्तकालय का उपयोग करना है जैसे प्रतिक्रिया-माप ।

अद्यतन : अब पता लगाने के लिए एक कस्टम हुक है (जिसे मैंने व्यक्तिगत रूप से आज़माया नहीं है): प्रतिक्रिया-आकार-पता । कस्टम हुक होने के कारण, यह उपयोग करने के लिए अधिक सुविधाजनक लगता है 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>
)

घटकों के बीच आकार में परिवर्तन को संप्रेषित करने के लिए, आप onResizeकॉलबैक पास कर सकते हैं और उन मूल्यों को संग्रहीत कर सकते हैं जो इसे कहीं मिलता है (इन दिनों राज्य को साझा करने का मानक तरीका Redux का उपयोग करना है ):

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

यदि आप वास्तव में पसंद करना चाहते हैं तो अपना खुद का रोल कैसे करें:

एक आवरण घटक बनाएँ जो डोम से मान प्राप्त कर रहा है और विंडो आकार बदलने वाली घटनाओं को सुन रहा है (या घटक जैसा पता लगाता है react-measure)। आप इसे बताएं कि कौन सा प्रॉप डोम से प्राप्त करता है और एक रेंडर फ़ंक्शन को एक बच्चे के रूप में ले रहा है।

DOM प्रॉप्स पढ़े जाने से पहले आपको जो प्रस्तुत करना होता है उसे माउंट किया जाना चाहिए; जब वे प्रॉप्स शुरुआती रेंडर के दौरान उपलब्ध नहीं होते हैं, तो आप उपयोग करना चाह सकते हैं style={{visibility: 'hidden'}}ताकि उपयोगकर्ता इसे JS-कंप्यूटेड लेआउट मिलने से पहले नहीं देख सके।

// @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)}/>;
  }
}

इसके साथ, चौड़ाई में परिवर्तन का जवाब देना बहुत आसान है:

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

Question 3

मुझे लगता है कि जिस जीवनचक्र पद्धति की आपको तलाश है, वह है componentDidMount। तत्वों को पहले से ही डोम में रखा गया है और आप घटक के बारे में उनसे जानकारी प्राप्त कर सकते हैंrefs ।

उदाहरण के लिए:

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" />
  }

});

Question 4

वैकल्पिक रूप से Couchand समाधान के लिए आप findDOMNode का उपयोग कर सकते हैं

var Container = React.createComponent({

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

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

Question 5

आप मेरे द्वारा लिखी गई लाइब्रेरी का उपयोग कर सकते हैं जो आपके घटकों को प्रस्तुत किए गए आकार पर नज़र रखता है और आपके माध्यम से इसे पास करता है।

उदाहरण के लिए:

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

डेमो: https://react-sizeme-example-esbefmsitg.now.sh/

गिथब: https://github.com/ctrlplusb/react-sizeme

यह एक अनुकूलित स्क्रॉल / ऑब्जेक्ट आधारित एल्गोरिथ्म का उपयोग करता है जिसे मैंने लोगों से उधार लिया है जो मैं जितना अधिक चतुर हूं। :)