শ্রেণিভিত্তিক উপাদানগুলিতে কীভাবে React.forwardRef ব্যবহার করবেন?

Question

আমি React.forwardRef ব্যবহার করার চেষ্টা করছি, তবে এটি কীভাবে শ্রেণিভিত্তিক উপাদান (এইচওসি নয়) তে কাজ করতে হয় সে সম্পর্কে ট্রিপ করছি।

দস্তাবেজের উদাহরণগুলিতে উপাদানগুলি এবং কার্যকরী উপাদানগুলি ব্যবহার করা হয়, এমনকি উচ্চতর অর্ডার উপাদানগুলির জন্য ফাংশনে ক্লাস মোড়ানো।

সুতরাং, তাদের ফাইলে এই জাতীয় কিছু দিয়ে শুরু ref.jsকরুন:

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

এবং পরিবর্তে এটি এর মতো কিছু হিসাবে সংজ্ঞা দেওয়া:

class TextInput extends React.Component {
  render() {
    let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
    return <input type="text" placeholder="Hello World" ref={ref} />;
  }
}

অথবা

class TextInput extends React.Component {
  render() { 
    return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
    );
  }
}

কেবলমাত্র কাজ করছে: /

এছাড়াও, আমি জানি আমি জানি, রেফগুলি প্রতিক্রিয়ার উপায় নয়। আমি তৃতীয় পক্ষের ক্যানভাস লাইব্রেরিটি ব্যবহার করার চেষ্টা করছি এবং তাদের কিছু সরঞ্জাম পৃথক উপাদানগুলিতে যুক্ত করতে চাই, তাই আমার ইভেন্ট শ্রোতাদের প্রয়োজন, তাই আমার জীবনচক্র পদ্ধতিগুলি প্রয়োজন। এটি পরে অন্য কোনও রুটে যেতে পারে তবে আমি এটি চেষ্টা করতে চাই।

ডকস বলেছে এটি সম্ভব!

রেফ ফরওয়ার্ডিং ডিওএম উপাদানগুলির মধ্যে সীমাবদ্ধ নয়। আপনি ক্লাস উপাদানগুলির উদাহরণগুলিতেও রেফার্স ফরোয়ার্ড করতে পারেন।

এই বিভাগে নোট থেকে ।

তবে তারা কেবল ক্লাসের পরিবর্তে এইচওসি ব্যবহার করতে চলেছে।

Answer 1

সর্বদা এর জন্য একই প্রপ ব্যবহার করার ধারণাটি কোনও refসহায়িকার সাথে ক্লাস রফতানির মাধ্যমে প্রক্সিং করে অর্জন করা যায়।

class ElemComponent extends Component {
  render() {
    return (
      <div ref={this.props.innerRef}>
        Div has ref
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <ElemComponent 
  innerRef={ref} {...props}
/>);

সুতরাং মূলত, হ্যাঁ, আমরা রেফারেন্স ফরওয়ার্ড করার জন্য আলাদা প্রপ করতে বাধ্য হই, তবে এটি হাবের অধীনে করা যায়। জনসাধারণ এটি একটি সাধারণ রেফ হিসাবে ব্যবহার করা গুরুত্বপূর্ণ।

Comments

আপনি যদি নিজের উপাদানটি প্রতিক্রিয়া- connectরেডাক্স বা মার্টেরিয়াল-ইউআইয়ের মতো এইচওসিতে আবদ্ধ করেন তবে আপনি কী করবেন withStyles?

— জে হিস্টারস

কি সমস্যা connectবা withStyles? আপনার সমস্ত এইচওসিগুলি মোড়ানো উচিত forwardRefএবং অভ্যন্তরীণভাবে চেইনের সবচেয়ে নিম্নতম উপাদানটিতে একটি রেফ পাস করার জন্য "নিরাপদ" প্রপ ব্যবহার করা উচিত ।

— মিঃ বি আর

আপনি সেটস্টেট ব্যবহার করার সময় এনজাইমে এটি কীভাবে পরীক্ষা করবেন সে সম্পর্কে কোনও অন্তর্দৃষ্টি?

— শূন্য_কুল

দুঃখিত আমি আরও কিছু বিশদ প্রয়োজন। সমস্যাটি ঠিক কী তা নিশ্চিত নয়।

— মিঃ বিআর

আমি পাচ্ছি: আক্রমণকারী লঙ্ঘন: প্রতিক্রিয়া শিশু হিসাবে অবজেক্টগুলি বৈধ নয় (পাওয়া গেছে: কীগুলির সাথে object $$ টাইপফোন, রেন্ডার})} যদি আপনি বাচ্চাদের সংগ্রহ সরবরাহ করতে চান, তবে পরিবর্তে একটি অ্যারে ব্যবহার করুন।

— ব্রায়ান লোগেনে

Answer 2

class BeautifulInput extends React.Component {
  const { innerRef, ...props } = this.props;
  render() (
    return (
      <div style={{backgroundColor: "blue"}}>
        <input ref={innerRef} {...props} />
      </div>
    )
  )
}

const BeautifulInputForwardingRef = React.forwardRef((props, ref) => (
  <BeautifulInput {...props} innerRef={ref}/>
));

const App = () => (
  <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />
)

ক্লাসে রেফ ফরওয়ার্ড করার জন্য আপনাকে আলাদা প্রপ নাম ব্যবহার করতে হবে। innerRefসাধারণত অনেক লাইব্রেরিতে ব্যবহৃত হয়।

Comments

আপনার কোডে beautifulInputElementপ্রতিক্রিয়া এলিমেন্টের চেয়ে বেশি একটি ফাংশন, এটি এর মতো হওয়া উচিতconst beautifulInputElement = <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />

— অলিভিয়ার বোইস

Answer 3

মূলত, এটি কেবল একটি এইচওসি ফাংশন। আপনি যদি এটি ক্লাসের সাথে ব্যবহার করতে চান, আপনি নিজের দ্বারা এটি করতে পারেন এবং নিয়মিত প্রপস ব্যবহার করতে পারেন।

class TextInput extends React.Component {
    render() {
        <input ref={this.props.forwardRef} />
    }
}

const ref = React.createRef();
<TextInput forwardRef={ref} />

এই প্যাটার্নটি উদাহরণস্বরূপ ব্যবহৃত হয় styled-componentsএবং এটি innerRefসেখানে ডাকা হয়।

Comments

আলাদা-নামযুক্ত প্রপ ব্যবহার করা innerRefপয়েন্টটি পুরোপুরি অনুপস্থিত। লক্ষ্যটি সম্পূর্ণ স্বচ্ছতা: আমার <FancyButton>কোনও এটির যেমন একটি নিয়মিত ডিওএম উপাদান হিসাবে আচরণ করতে সক্ষম হওয়া উচিত তবে স্টাইল্ড-উপাদানগুলির পদ্ধতির ব্যবহার করে আমার মনে রাখা দরকার যে এই উপাদানটি ন্যায়বিচারের পরিবর্তে রেফের জন্য একটি নির্বিচারে-নামযুক্ত প্রপ ব্যবহার করে ref।

— ব্যবহারকারী 128216

যাই হোক না কেন, স্টাইলযুক্ত উপাদানগুলি ব্যবহার করে বাচ্চার কাছে রেফ পাস করার পক্ষে সমর্থন ছেড়ে দিতেinnerRef চায় React.forwardRef, যা ওপি অর্জনের চেষ্টা করছে।

— ব্যবহারকারী 128216

Answer 4

আপনি যদি পছন্দ করেন তবে এটি একটি উচ্চ-অর্ডার উপাদান দিয়ে সম্পন্ন হতে পারে:

import React, { forwardRef } from 'react'

const withForwardedRef = Comp => {
  const handle = (props, ref) =>
    <Comp {...props} forwardedRef={ref} />

  const name = Comp.displayName || Comp.name
  handle.displayName = `withForwardedRef(${name})`

  return forwardRef(handle)
}

export default withForwardedRef

এবং তারপরে আপনার উপাদান ফাইলটিতে:

class Boop extends React.Component {
  render() {
    const { forwardedRef } = this.props

    return (
      <div ref={forwardedRef} />
    )
  }
}

export default withForwardedRef(Boop)

আমি পরীক্ষাগুলি নিয়ে কাজটি করেছি এবং এর জন্য একটি প্যাকেজ প্রকাশ করেছি react-with-forwarded-ref: https://www.npmjs.com/package/react-with-forwarded-ref

Answer 5

এটি আপনাকে অনেকগুলি ডিফারেন্ট উপাদানগুলিতে পুনরায় ব্যবহার করতে হবে তবে আপনি এই ক্ষমতাটি এর মতো কোনও ক্ষেত্রে রফতানি করতে পারেন withForwardingRef

const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
    React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef={ref} />);

export default withForwardingRef;

ব্যবহার:

const Comp = ({forwardedRef}) => (
 <input ref={forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp);  // Now Comp has a prop called forwardedRef