چگونه می توان بررسی کرد که آیا یک جزء یک جزء Ref REF در React است؟

در این مقاله ، یک قطعه کد را از کد منبع TIPTAP بررسی خواهیم کرد.

/**
 * Check if a component is a forward ref component.
 * @param Component
 * @returns {boolean}
 */
function isForwardRefComponent(Component: any) {
  return !!(
    typeof Component === 'object'
    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
  )
}

این نظر توضیح می دهد که این عملکرد چه کاری انجام می دهد – isForwardRefComponent

شما می توانید با استفاده از این نحو در زیر React ForwardRef را بنویسید:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

در React 19 ، forwardRef دیگر لازم نیست عبور ref در عوض به عنوان یک پروانه. forwardRef در یک نسخه آینده کاهش می یابد. اینجا بیشتر بدانید

اطلاعات بیشتر در مورد Forwardref را بخوانید.

typeof Component === 'object'
&& Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'

من فکر نمی کنم شما چیزی شبیه به این را در اسناد پیدا کنید.

چند مورد که می خواهم در اینجا ذکر کنم. اگر این به من بستگی داشت ، من می خواهم به عنوان مؤلفه ای که با استفاده از ForwardRef ایجاد شده و سپس خصوصیات آن را بازرسی کرده و یک پیشنهاد قابل اعتماد پیدا کنم که می توانم بررسی کنم تا اطمینان حاصل کنم که این مؤلفه یک Forward_Ref است. ’Symbol(react.forward_ref)’ این احتمالاً مقدار کلید است – $$typeof

من از مثال Docs برای ورود به مؤلفه MyInput استفاده کردم و مطابق شکل زیر به نظر می رسد

سلام ، نام من رامو ناراسینگا است. من پروژه های بزرگ منبع باز را مطالعه می کنم و در مورد معماری پایگاه کد آنها و بهترین شیوه ها مطالب ایجاد می کنم و آن را از طریق مقاله ، فیلم به اشتراک می گذارم.

من برای کار روی پروژه های جالب باز هستم. برای من ایمیل بفرستید در ramu.narasinga@gmail.com

GitHub من-https://github.com/ramu-narasinga

وب سایت من – https://ramunarasinga.com

کانال یوتیوب من – https://www.youtube.com/@thinkthroo

پلت فرم یادگیری – https://thinkthroo.com

معماری پایگاه کد – https://app.thinkthroo.com/architecture

بهترین روشها-https://app.thinkthroo.com/best-practices

پروژه های درجه تولید-https://app.thinkthroo.com/production-prade-projects

1. https://github.com/ueberdosis/tiptap/blob/deveravel/packages/react/src/reactrenderer.tsx#l25

2. https://react.dev/reference/react/useref

3. https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/symbol