প্রতিক্রিয়া জন্য একটি রেফারেন্স জন্য সঠিক প্রপটিপ কি?

Question 1

আমি আমার রিডেক্স স্টোরে একটি রেফ সংরক্ষণ করছি এবং এতে অ্যাক্সেসের প্রয়োজন असलेल्या উপাদানগুলির রেফটি প্রকাশ করার জন্য মানচিত্রস্টেটটোপ্রপস ব্যবহার করছি।

সঞ্চিত রেফটি দেখে মনে হচ্ছে:

ref={node => this.myRefToBePutInReduxGlobalStore = node}

এই রেফের জন্য সঠিক প্রোপটাইপ কী?

Question 2

টিএল; ডিআর

আপনি যদি এমন একটি রেফ টাইপ করতে চান যা কেবল দেশী DOM উপাদান যেমন একটি divবা একটি আশা করে inputতবে সঠিক সংজ্ঞাটি নিম্নলিখিতটি:

refProp: PropTypes.oneOfType([
    // Either a function
    PropTypes.func, 
    // Or the instance of a DOM native element (see the note about SSR)
    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])

মূল পোস্টে বর্ণিত নির্দিষ্ট সমস্যার উত্তর

ওপি প্রশ্নের উদাহরণে, এটি রেফ প্রোপ টাইপ নয় যা ঘোষণা করা দরকার, তবে রেফ দ্বারা নির্দেশিত স্টাফ এবং এটি রিডেক্স ব্যবহার করে পাস করা হবে mapStateToProps। কোনও ডিওএম উপাদানগুলির জন্য প্রপ প্রকারটি হ'ল: myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)(এটি যদি কোনও ডিওএম উপাদান থাকে)। যদিও, আমি করব:

এটির নামকরণ করুন myElementToBePutInReduxGlobalStore(কোনও উপাদান কোনও রেফ নয়)
রিডেক্স স্টোরের মধ্যে অ-সিরিয়ালযোগ্যযোগ্য ডেটা সঞ্চয় করা এড়িয়ে চলুন
প্রতিক্রিয়া প্রকৌশলী সেব মার্কবেজের ব্যাখ্যা অনুসারে প্রপসগুলিতে উপাদানগুলি এড়িয়ে চলুন

আসল প্রশ্নের দীর্ঘ উত্তর

প্রশ্ন: প্রতিক্রিয়ায় একটি রেফের জন্য সঠিক প্রপটিপ কী?

উদাহরণ ব্যবহারের ক্ষেত্রে:

function FancyInput({ inputRef }) {
    return (
        <div className="fancy">
            Fancy input
            <input ref={inputRef} />
        </div>
    )
}

FancyInput.propTypes = {
    inputRef: ???   // What is the correct prop type here?
}

function App(props) {
    const inputRef = React.useRef()
    useLayoutEffect(function focusWhenStuffChange() {
        inputRef.current?.focus()
    }, [props.stuff])
    return <FancyInput inputRef={inputRef} />
}

আজ, বিক্রিয়ায় দুটি ধরণের রেফ রয়েছে:

এমন একটি বস্তু যা দেখতে দেখতে: { current: [something] }সাধারণত React.createRef()সহায়ক বা React.useRef()হুক দ্বারা তৈরি
একটি কলব্যাক ফাংশন যা [something]এর আর্গুমেন্ট হিসাবে গ্রহণ করবে (ওপি উদাহরণের মতো)

দ্রষ্টব্য: icallyতিহাসিকভাবে, আপনি একটি স্ট্রিং রেফ ব্যবহার করতে পারেন তবে এটি উত্তরাধিকার হিসাবে বিবেচিত এবং প্রতিক্রিয়া থেকে সরানো হবে

দ্বিতীয় আইটেমটি বেশ সহজ এবং নিম্নলিখিত ঠেকনা টাইপ জন্য প্রয়োজন হয়: PropTypes.func।

প্রথম বিকল্পটি কম সুস্পষ্ট কারণ আপনি রেফ দ্বারা নির্দেশিত উপাদানগুলির ধরণ নির্দিষ্ট করতে চাইতে পারেন।

অনেক ভাল উত্তর

ref DOM উপাদান ছাড়া অন্য কোনও কিছুতে নির্দেশ করতে পারে।

আপনি যদি সম্পূর্ণ নমনীয় হতে চান:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.any })
])

উপরেরগুলি কেবলমাত্র অবজেক্টের রেফ ডাব্লু / currentসম্পত্তি আকার প্রয়োগ করে । এটি যে কোনও ধরণের রেফার জন্য সর্বদা কাজ করবে। প্রপ টাইপটি ব্যবহার করার উদ্দেশ্যে যা আপনার বিকাশের সময় কোনও অসঙ্গতি চিহ্নিত করার একটি উপায় এটি সম্ভবত যথেষ্ট। এটি খুব অসম্ভব বলে মনে হচ্ছে যে কোনও আকার আকৃতিযুক্ত { current: [any] }এবং এটি একটিতে প্রেরণ করা হয়েছেrefToForward ঠেকনা, হবে না প্রকৃত সুত্র হতে।

তবে , আপনি ঘোষণা করতে পারেন যে আপনার উপাদানটি আশা করে না কোনও ধরণের রেফের , কেবলমাত্র একটি নির্দিষ্ট ধরণের, এটির জন্য প্রয়োজনীয় রেফার দরকার।

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

যদি আপনি কেবল কোনও নেটিভ ইনপুট উপাদানটির দিকে নির্দেশ করে এমন কোনও রেফার প্রত্যাশা করেন, কোনও HTML নয় Element:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) })
])

যদি আপনি কেবল একটি প্রতিক্রিয়া শ্রেণীর উপাদানকে নির্দেশ করে এমন কোনও রেফ আশা করেন:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(Component) })
])

আপনি যদি useImperativeHandleকিছু জনসাধারণের পদ্ধতি প্রকাশের জন্য কেবল কোনও কার্যকরী উপাদানকে নির্দেশ করে এমন কোনও রেফের প্রত্যাশা করেন :

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.object })
])

দ্রষ্টব্য: উপরের প্রপ প্রকারটি আকর্ষণীয় কারণ এটি প্রতিক্রিয়া উপাদান এবং নেটিভ ডোম উপাদানগুলিও কভার করে কারণ তারা সকলেই বেস জাভাস্ক্রিপ্টের উত্তরাধিকার সূত্রে প্রাপ্ত Object

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

সার্ভার সাইড রেন্ডারিং সম্পর্কে নোট

যদি আপনার কোডটি সার্ভারে চালিত করতে হয়, যদি না আপনি ইতিমধ্যে পলফিল ডোম পরিবেশ, Elementবা অন্য কোনও ক্লায়েন্ট-সাইড প্রকার undefinedনোডজেএসে থাকে। আপনি এটি সমর্থন করতে নিম্নলিখিত শিম ব্যবহার করতে পারেন:

Element = typeof Element === 'undefined' ? function(){} : Element

নিম্নলিখিত প্রতিক্রিয়া ডক্স পৃষ্ঠাগুলি কীভাবে রেফ ব্যবহার করতে হবে, উভয় অবজেক্ট এবং কলব্যাক এবং কীভাবে হুক ব্যবহার করবেন সে সম্পর্কে আরও অন্তর্দৃষ্টি দেয়useRef

উত্তর আপডেট হয়েছে @ রাহুল সাগোর, @ ফেরেনক কামরা, @ এসভিএনএম, এবং @ কামুয়েলা ফ্রাঙ্কোকে ধন্যবাদ

Question 3

@ পান্ডাইলো এর পোস্টের সাথে খুব মিল,

PropTypes.elementType এখন যোগ করা হয়েছে

forwardedRef: PropTypes.oneOfType([
  PropTypes.func,
  PropTypes.shape({ current: PropTypes.elementType })
]),

তাহলে PropTypes ব্যবহার> = 15.7.0 PropTypes.elementTypeফেব্রুয়ারী 10, 2019 যোগ করা হয়েছিল এই জনসংযোগ

Question 4

আমি কেবল পছন্দসই উপায়টি যাচাই করি এবং যেহেতু প্রোপটাইপ.অবজেক্টটি খুব মূল্যবান নয় আমি এটি ব্যবহার করে শেষ করেছি:

PropTypes.shape({ current: PropTypes.instanceOf(Element) })

Question 5

আমি উপরের সমস্ত উত্তরগুলি যাচাই করেছিলাম তবে প্রতিক্রিয়া থেকে আমি একটি সতর্কতা পেয়েছি, তাই আমি অনেকগুলি গবেষণা করেছিলাম এবং আমি সঠিক উত্তর পেয়েছি।

import React, { Component } from 'react';

ComponentName.propTypes = {
  reference: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
  ]),
};