টাইপস্ক্রিপ্ট এবং প্রতিক্রিয়া - বাচ্চাদের টাইপ?

Question

আমার নিম্নরূপে খুব সাধারণ কার্যকরী উপাদান রয়েছে:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

এবং অন্য উপাদান:

import * as React from "react";

export interface LayoutProps  { 
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

আমি নিম্নলিখিত ত্রুটি পেতে থাকি:

[টিএসএস] জেএসএক্স উপাদান উপাদান 'রিঅ্যাক্টনোড' জেএসএক্স উপাদানগুলির জন্য কোনও নির্মাণকারী ফাংশন নয়। টাইপ 'অপরিজ্ঞাত' টাইপ 'এলিমেন্টক্লাস' টাইপ করার যোগ্য নয়। [2605]

আমি কীভাবে এটি সঠিকভাবে টাইপ করব?

Answer 1

মাত্র children: React.ReactNode

Comments

এখানেই সঠিক উত্তর! JSX.Elementবৈধ প্রতিক্রিয়া শিশুদের পক্ষে একটি স্ট্রিং, বুলিয়ান, নাল ... ReactChildএকই কারণে খুব অসম্পূর্ণ হতে পারে

— পিয়ের ফেরি

@ পিয়ারফেরি ইস্যুটি হ'ল প্রায় কোনও কিছু নির্ধারিত হতে পারে ReactNode। এটা তোলে টাইপ নিরাপত্তা, টাইপিং অনুরূপ পদ সাহায্য না childrenযেমন any- আমার দেখতে উত্তর একটি ব্যাখ্যা জন্য।

— ford04

আপনার প্রতিক্রিয়া @ ford04 জন্য ধন্যবাদ। আমার ব্যবহারের ক্ষেত্রে আমি চাই শিশুরা শিথিলভাবে টাইপ হোক। আমার উপাদানটি কোনও ধরণের বৈধ প্রতিক্রিয়া শিশুদের গ্রহণ করে। সুতরাং আমি বিশ্বাস করি যে এটি এখনও আমি উত্তরটি খুঁজছিলাম :)

— পিয়েরে ফেরি

Answer 2

<Aux>আপনার জেএসএক্স ব্যবহার করার জন্য , এটি এমন ফাংশন হওয়া দরকার যা ফেরত দেয় ReactElement<any> | null। এটি একটি ফাংশন উপাদান সংজ্ঞা ।

তবে এটি বর্তমানে ফাংশন হিসাবে সংজ্ঞায়িত হয়েছে React.ReactNodeযা প্রত্যাবর্তন করে যা অনেক বেশি প্রকারের type প্রতিক্রিয়া টাইপিংগুলি যেমন বলে:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

রিট্যাক্ট ফ্র্যাগমেন্টে ( <></>) রিটার্ন করা মানটি আবদ্ধ করে অবাঞ্ছিত প্রকারগুলি নিরপেক্ষ হয়েছে তা নিশ্চিত করুন :

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;

Comments

আমি বুঝতে পারি না কেন এটি childrenএকটি প্রতিক্রিয়া খণ্ডে মোড়ানো প্রয়োজন । বোঝাতে কি যত্ন? প্রতিক্রিয়া মধ্যে এটি পুরোপুরি বৈধ return children;।

— সানফিলিপোপাব্লো

যদি childrenএকটি অ্যারে হয় না। যদি এটি হয় তবে আপনাকে সেগুলি একটি একক নোডে আবদ্ধ করতে হবে বা প্রতিক্রিয়াযুক্ত খণ্ডগুলি ব্যবহার করতে হবে।

— করোল মাজেউস্কি

হ্যাঁ, আমার কোডে আমার রয়েছে: return React.Children.count(children) > 1 ? <>{children}</> : childrenতবে টাইপস্ক্রিপ্ট সে সম্পর্কে অভিযোগ করে। আমি এটিকে প্রতিস্থাপন করেছি ন্যায়বিচারের সাথে <>{children}</>।

— সানফিলিপোপাব্লো

এটি অভিযোগ করে কারণ childrenকেবলমাত্র 1 টি আইটেম রয়েছে এমন উপাদানগুলির একটি তালিকা। আমি মনে করি আপনি যদি return React.Children.count(children) > 1 ? <>{children}</> : children[0]@ সানফিলিপোপাব্লো করেন তবে এটি কার্যকর হবে

— tamj0rd2

এটি প্রতিক্রিয়াটির নতুন সংস্করণগুলিতে কাজ করছে বলে মনে হয় না। আমি কনসোল লগ এবং নিশ্চিত করতে পারেন যে, আমি একজন শিশু ঠেকনা আছে, কিন্তু এমনকি <React.Fragment>পার্শ্ববর্তী {props.children}আমি কিছুই ফিরে করছি না।

— চিহ্নিত করুন

Answer 3

এটিই আমার পক্ষে কাজ করেছে:

interface Props {
  children: JSX.Element[] | JSX.Element
}

সম্পাদনা করুন আমি children: React.ReactNodeএখন পরিবর্তে ব্যবহার করার পরামর্শ দিচ্ছি ।

Comments

এটি একটি সংজ্ঞা যথেষ্ট বিস্তৃত নয়। শিশু একটি স্ট্রিং হতে পারে।

— মাইক এস

কমপক্ষে এই উদাহরণটি আমার পক্ষে কাজ করেছে যেহেতু আমার উপাদানটি 1 বা ততোধিক জেএসএক্স.এলিমেন্টগুলি প্রত্যাশা করেছিল। ধন্যবাদ!

— ইটালো বোর্জেস

এটি শিশুদের মতো জাভাস্ক্রিপ্ট এক্সপ্রেশন নিয়ে কাজ করবে না <MyComponent>{ condition ? <span>test</span> : null}</MyComponent>। ব্যবহার children: ReactNodeকাজ করবে।

— নিকফথিম

Answer 4

আপনি আপনার উপাদানটিকে এভাবে ঘোষণা করতে পারেন:

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

Answer 5

আপনি ব্যবহার করতে পারেন ReactChildrenএবং ReactChild:

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

Answer 6

টাইপস্ক্রিপ্ট সাইট থেকে: https://github.com/Mic Microsoft/TypeScript/issues/6471

প্রস্তাবিত অনুশীলনটি হ'ল {শিশু?: যে কোনও as

এটা আমার জন্য কাজ করেছে। চাইল্ড নোড বিভিন্ন জিনিস হতে পারে, তাই স্পষ্টত টাইপিং কেস মিস করতে পারে।

ফলোআপ ইস্যুতে এখানে দীর্ঘ আলোচনা হচ্ছে: https://github.com/Mic Microsoft/TypeScript/issues/13618 , তবে যে কোনও পদ্ধতির এখনও কার্যকর হয়।

Answer 7

ফাংশন উপাদান রিটার্ন টাইপ JSXElement | nullটাইপস্ক্রিপ্টে সীমাবদ্ধ । এটি একটি বর্তমান ধরণের সীমাবদ্ধতা, খাঁটি প্রতিক্রিয়া আরও রিটার্নের ধরণের অনুমতি দেয় ।

সর্বনিম্ন প্রদর্শনের স্নিপেট

আপনি হয় কাজের ধরণ হিসাবে কোনও প্রকারের দৃser়তা বা টুকরো ব্যবহার করতে পারেন:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

---

ReactNode

children: React.ReactNodeলক্ষ্যটি যদি শক্তিশালী প্রকারের হয় তবে তা সাবঅপটিমাল হতে পারে Aux।

প্রায় কোনও কিছুই বর্তমান ReactNodeটাইপকে বরাদ্দ করা যেতে পারে যা সমান {} | undefined | null। আপনার ক্ষেত্রে একটি নিরাপদ প্রকার হতে পারে:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

উদাহরণ:

প্রদত্ত Auxপ্রয়োজনগুলি প্রতিক্রিয়ার উপাদানগুলির হিসাবে children, আমরা দুর্ঘটনাক্রমে stringএটিতে একটি যুক্ত করেছি। তারপরে উপরের সমাধানটি এর বিপরীতে ত্রুটি ঘটবে ReactNode- লিঙ্কযুক্ত খেলার মাঠগুলি একবার দেখুন।

টাইপ করা childrenজেন্ডার প্রপ কলব্যাকের মতো নন-জেএসএক্স প্রসগুলির জন্যও দরকারী ।

Answer 8

আপনি ব্যবহার করতে পারেন React.PropsWithChildren<P>।

type ComponentWithChildProps = React.PropsWithChildren<{example?: string}>;

Answer 9

যে কোনও ধরণের সন্ধানের সাধারণ উপায় উদাহরণস্বরূপ। টাইপসক্রিপ্টের সৌন্দর্যটি হ'ল আপনার কাছে সঠিক ফাইল রয়েছে যতক্ষণ না আপনি সমস্ত ধরণের অ্যাক্সেস পান @types/।

এর উত্তর দেওয়ার জন্য আমি কেবল এমন একটি উপাদান ব্যবহারের কথা ভেবেছিলাম যার সাথে childrenপ্রোপ রয়েছে। প্রথম কথা মনে মনে এল? কীভাবে <div />?

আপনাকে যা করতে হবে তা হ'ল vscode খুলুন এবং এর .tsxসাথে একটি প্রতিক্রিয়া প্রকল্পে একটি নতুন ফাইল তৈরি করুন @types/react।

import React from 'react';

export default () => (
  <div children={'test'} />
);

childrenপ্রপ উপর ঘুরিয়ে আপনি টাইপ দেখায়। এবং আপনি কী জানেন - এর ধরণটি ReactNode(কোনও প্রয়োজন নেই ReactNode[])।

তারপরে আপনি যদি টাইপ সংজ্ঞাটিতে ক্লিক করেন তবে এটি আপনাকে ইন্টারফেস childrenথেকে আসার সংজ্ঞাটিতে সরাসরি নিয়ে আসে DOMAttributes।

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

দ্রষ্টব্য: এই প্রক্রিয়াটি কোনও অজানা প্রকারের জন্য ব্যবহার করা উচিত! তাদের সবগুলিই কেবল তাদের সন্ধানের জন্য অপেক্ষা করছে :)

Answer 10

একধরণের বাচ্চা রয়েছে বলে আমি ব্যবহার করছি:

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

এই শিশুদের ধারক প্রকারটি বিভিন্ন ধরণের কেস সমর্থন করার জন্য যথেষ্ট জেনেরিক এবং রিএ্যাকটিজেএস এপিআইয়ের সাথেও একত্রিত হয়।

সুতরাং, আপনার উদাহরণের জন্য এটি এমন কিছু হবে:

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

Answer 11

এই উত্তরগুলি পুরানো বলে মনে হচ্ছে - প্রতিক্রিয়াটির এখন একটি বিল্ট টাইপ রয়েছে PropsWithChildren<{}>। এটি এই পৃষ্ঠায় সঠিক উত্তরগুলির সাথে একইভাবে সংজ্ঞায়িত হয়েছে:

type PropsWithChildren<P> = P & { children?: ReactNode };

Comments

Pএই ধরণের ক্ষেত্রে কী আছে?

— সানপাইট্রো

Pআপনার উপাদানগুলির প্রপসগুলির ধরন

— টিম আইলস

Answer 12

প্রতিক্রিয়াযুক্ত উপাদানগুলির একটি একক মোড়কের নোড থাকতে হবে বা নোডের একটি অ্যারেরটি ফিরতে হবে।

আপনার <Aux>...</Aux>উপাদান দুটি নোড divএবং main।

একটি আপনার সন্তানদের মোড়ানো করার চেষ্টা করুন divমধ্যে Auxঅংশ।

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

const aux = (props: AuxProps) => (<div>{props.children}</div>);

export default aux;

Comments

সত্য না. প্রতিক্রিয়া 16+ এ আর কেস নয়, প্লাস ত্রুটিটি যদি এটি হত তবে এটি বলত

— অ্যান্ড্রু লি