টাইপস্ক্রিপ্টে স্টেটলেস কার্যক্ষম উপাদানগুলির সাথে প্রতিক্রিয়াযুক্ত শিশুদের কীভাবে ব্যবহার করবেন?

Question 1

প্রতিক্রিয়া সহ টাইপস্ক্রিপ্ট ব্যবহার করে আমাদের আর সংকলকটি React.Propsজানতে পারে যে সমস্ত প্রতিক্রিয়া উপাদানগুলির প্রপসগুলির বাচ্চা হতে পারে:

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

তবে রাষ্ট্রহীন কার্যক্ষম উপাদানগুলির ক্ষেত্রে এটি মনে হয় না:

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

সংকলনের ত্রুটিটি প্রকাশ করে:

ত্রুটি: (102, 17) টিএস 2339: সম্পত্তি 'শিশুদের' টাইপ 'মাইপ্রপস' তে বিদ্যমান নেই।

আমার ধারণা এটি এই কারণ কম্পাইলারের পক্ষে সত্যিকার অর্থে কোনও উপায় নেই যে childrenপ্রপস যুক্তিতে একটি ভ্যানিলা ফাংশন দেওয়া হচ্ছে ।

সুতরাং প্রশ্নটি হল আমরা কীভাবে টাইপসক্রিপ্টে একটি রাজ্যহীন কার্যকারী উপাদানগুলিতে শিশুদের ব্যবহার করব?

আমি পুরানো পথে ফিরে যেতে পারতাম MyProps extends React.Props, তবে Propsইন্টারফেসটি অবচয় হিসাবে চিহ্নিত করা হয়েছে , এবং রাষ্ট্রবিহীন উপাদানগুলি Props.refযেমন বুঝতে পারছে তেমন নেই বা সমর্থন করে না।

সুতরাং আমি childrenম্যানুয়ালি প্রোপটি সংজ্ঞায়িত করতে পারি :

interface MyProps {
  children?: React.ReactNode;
}

প্রথম: ReactNodeসঠিক ধরণ?

দ্বিতীয়: আমাকে বাচ্চাগুলিকে alচ্ছিক ( ?) হিসাবে লিখতে হবে বা অন্যথায় গ্রাহকরা ভাবেন যে এটি উপাদান ( ) এর childrenএকটি গুণ হিসাবে বিবেচিত হবে <MyStatelessComponent children={} />এবং মান প্রদান না করা থাকলে একটি ত্রুটি বাড়িয়ে তুলবে ।

মনে হচ্ছে আমি কিছু মিস করছি। আমার শেষ উদাহরণটি প্রতিক্রিয়াযুক্ত শিশুদের সাথে রাষ্ট্রহীন ক্রিয়ামূলক উপাদানগুলি ব্যবহার করার উপায় কিনা সে সম্পর্কে কেউ কি কিছু স্পষ্টতা সরবরাহ করতে পারেন?

Question 2

প্রতিক্রিয়া 16.8 আপডেট: 16.8 প্রতিক্রিয়া হওয়ার পরে, নামগুলি React.SFCএবং React.StatelessComponentহ্রাস করা হয়েছে। আসলে, তারা React.FunctionComponentটাইপ বা React.FCসংক্ষিপ্ত জন্য এলিয়াস হয়ে গেছে ।

আপনি সেগুলি একইভাবে ব্যবহার করবেন যদিও:

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

16.8 (পুরাতন) প্রতিক্রিয়া দেওয়ার আগে:

আপাতত, আপনি React.StatelessComponent<>টাইপটি ব্যবহার করতে পারেন , যেমন:

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

আমি সেখানে যা যুক্ত করেছি তা উপাদানটির রিটার্ন টাইপ React.StatelessComponentটাইপ করতে হবে।

আপনার নিজস্ব কাস্টম প্রপস ( MyPropsইন্টারফেসের মতো ) সহ একটি উপাদানটির জন্য :

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

এখন, propsপেয়েছে childrenসম্পত্তি সেইসাথে থেকে যারা MyPropsইন্টারফেস।

আমি টাইপস্ক্রিপ্ট সংস্করণ 2.0.7 এ এটি পরীক্ষা করেছি

অতিরিক্তভাবে, আপনি সংক্ষিপ্তকরণের React.SFCপরিবর্তে ব্যবহার করতে পারেন React.StatelessComponent।

Question 3

আপনি React.PropsWithChildren<P>আপনার প্রপস জন্য টাইপ ব্যবহার করতে পারেন :

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

Question 4

তুমি ব্যবহার করতে পার

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

Question 5

সহজ উত্তর: ব্যবহার করুন ReactNode:

interface MyProps {
  children?: React.ReactNode
}

তাহলে childrenঐচ্ছিক বা না (অর্থাত থাকার ?বা না হোক) আপনার উপাদান উপর নির্ভর করে। ?যে প্রকাশ করার সবচেয়ে সংক্ষিপ্ত পথ, যাতে সঙ্গে কিছুই ভুল।

ইতিহাসের বিষয়ে: মূলত যখন জিজ্ঞাসা করা হয়েছিল তখন এটি পুনরুদ্ধারের সঠিক উত্তর ছিল না: টাইপটি ReactNode(প্রায়) মার্চ মাসে তার বর্তমান ফর্মটিতে যোগ করা হয়েছিল কেবল এই টানার অনুরোধের মাধ্যমে , তবে আজ এটি পড়ার প্রায় প্রত্যেকেরই প্রতিক্রিয়াটির একটি আধুনিক সংস্করণে থাকা উচিত ।

সবশেষে, children"অ্যাট্রিবিউট" হিসাবে পাস করার বিষয়ে (যা রিঅ্যাক্ট লিঙ্গোতে এটিকে "প্রোপ" হিসাবে চিহ্নিত করা হবে, বৈশিষ্ট্য নয়): এটি সম্ভব, তবে বেশিরভাগ ক্ষেত্রে জেএসএক্স শিশুদের পাশ করার সময় আরও ভাল পড়া যায়:

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

আরও সহজে পড়া

<MyComponent children={<p>This is part of the children.</p>} />

Question 6

আপনি কেবলমাত্র উপাদানগুলিতে বাচ্চাদের যুক্ত করতে পারেন এবং যদি এটি কোনও ধারকটির সাথে সংযুক্ত থাকে যা আপনার যা প্রয়োজন তা কেবল।

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}