javascript - bengali - react js tutorial



ক্লাস ভিত্তিক উপাদানগুলিতে কীভাবে React.forwardRef ব্যবহার করবেন? (4)

আপনাকে অনেকগুলি পার্থক্যযুক্ত উপাদানগুলিতে এটি পুনরায় ব্যবহার করতে হবে তবে আপনি এই ক্ষমতাটি withForwardingRef মতো 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

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

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

সুতরাং, তাদের 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} />))
    );
  }
}

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

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

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

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

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

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


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

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 : react-with-forwarded-ref : https://www.npmjs.com/package/react-with-forwarded-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}
/>);

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


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

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

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






reactjs