मुझे जेएसएक्स में बाल तत्व को रेफरी पास करने में कुछ समस्या है। कृपया, निम्नलिखित देखें:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return (
      <div id="parent" ref={element => (this.parentRef = element)}>
        <canvas id="child" width={this.parentRef.offsetWidth} />
      </div>
    );
  }
}

ReactDOM.render(document.getElementById("app"), <App />);

मैं #child से #parent चौड़ाई तक पहुंचना चाहता हूं। यह कैसे संभव है?

0
Fallen Angel 4 मार्च 2019, 00:02

2 जवाब

सबसे बढ़िया उत्तर

आपके विशेष उदाहरण में आप केवल एक तत्व की चौड़ाई प्राप्त कर रहे हैं और इसे किसी अन्य तत्व को पास कर रहे हैं। यदि आप नवीनतम प्रतिक्रिया संस्करण का उपयोग कर रहे हैं तो आपको नए रेफरी के एपीआई की जांच करनी चाहिए (https:/ /reactjs.org/docs/refs-and-the-dom.html) और आपका उदाहरण कुछ ऐसा दिखाई देगा

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0
    };
    this.parentRef = React.createRef();
  }
  componentDidMount() {
    window.addEventListener("resize", this.onResize);
    this.onResize();
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.onResize);
  }
  onResize = () => {
    this.setState({
      width: this.getParentSize()
    });
  };
  getParentSize() {
    return (this.parentRef.current && this.parentRef.current.offsetWidth) || 0;
  }
  render() {
    return (
      <div id="parent" ref={this.parentRef}>
        <canvas
          id="child"
          width={this.getParentSize()}
          style={{ background: "red" }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
1
Yaroslav Stasyuk 3 मार्च 2019, 21:27

यह बहुत देर हो चुकी है, लेकिन मेरे पास भविष्य के दर्शकों के लिए नवीनतम रिएक्ट हुक और कार्यात्मक घटकों का उपयोग करके एक समाधान है। जिस तरह से रेफरी काम करते हैं, वे मूल्य परिवर्तन पर फिर से प्रस्तुत नहीं करते हैं। हालांकि, मोज़िला ने ResizeObserver नाम से कुछ जोड़ा: https://developer.mozilla। org/en-US/docs/Web/API/ResizeObserver, जो आकार बदलने के लिए घटकों को देखता है।

import React, { useRef, useEffect, useState } from "react";
import ResizeObserver from "resize-observer-polyfill";

export default function App() {
  const parentRef = useRef(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const ro = new ResizeObserver((entries) => {
      entries.forEach((entry) => setWidth(entry.contentRect.width));
    });
    ro.observe(parentRef.current);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={parentRef}>
      <div> {width} </div>
    </div>
  );
}

कोड इन एक्शन: https://codesandbox.io/s /reverent-galileo-q7np5?file=/src/App.js

0
charri 19 अगस्त 2020, 17:10