टाइपस्क्रिप्ट में रिएक्ट स्टेटलेस फंक्शनल कंपोनेंट वाले बच्चों का उपयोग कैसे करें?

Question

React के साथ टाइपस्क्रिप्ट का उपयोग करते हुए अब हमें 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) TS2339: संपत्ति 'बच्चे' प्रकार 'MyProps' पर मौजूद नहीं है।

मुझे लगता है कि यह इसलिए है क्योंकि कंपाइलर को यह जानने का कोई तरीका नहीं है कि childrenप्रॉम्प्स तर्क में एक वेनिला फंक्शन दिया जाएगा ।

तो सवाल यह है कि हमें टाइपस्क्रिप्ट में एक सांख्यिकीय कार्यात्मक घटक में बच्चों का उपयोग कैसे करना चाहिए?

मैं पुराने तरीके से वापस जा सकता हूं MyProps extends React.Props, लेकिन Propsइंटरफ़ेस को पदावनत के रूप में चिह्नित किया गया है , और स्टेटलेस घटकों के पास नहीं है या Props.refजैसा कि मैं समझता हूं कि यह समर्थन नहीं करता है।

तो मैं childrenमैन्युअल रूप से परिभाषित कर सकता है :

interface MyProps {
  children?: React.ReactNode;
}

पहला: ReactNodeसही प्रकार है?

दूसरा: मैं वैकल्पिक के रूप में बच्चों को लिखने के लिए है ( ?) या फिर उपभोक्ताओं है कि लगता है कि होगा childrenएक माना जाता है विशेषता घटक (के <MyStatelessComponent children={} />), और अगर एक मूल्य के साथ प्रदान की नहीं एक त्रुटि बढ़ा।

ऐसा लगता है जैसे मुझे कुछ याद आ रहा है। क्या कोई इस पर कुछ स्पष्टता प्रदान कर सकता है कि क्या मेरा अंतिम उदाहरण बच्चों के साथ प्रतिक्रियाशील कार्यात्मक घटकों का उपयोग करने का तरीका है?

Answer 1

प्रतिक्रिया 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मिल गया है।childrenMyProps

मैंने इसे टाइपस्क्रिप्ट संस्करण 2.0.7 में जांचा

इसके अतिरिक्त, आप संक्षिप्तता React.SFCके React.StatelessComponentलिए उपयोग कर सकते हैं ।

Comments

धन्यवाद! ऐसा लगता है कि मैं टाइपिंग के एक पुराने संस्करण पर हूं जो इसका समर्थन नहीं करता है ... मुझे लगता है कि यह बुलेट को काटने और TS 2.0 का उपयोग करने का समय है@types

— हारून बीलल

React.StatelessComponent/ React.SFCपदावनत हैं। इसके React.FunctionComponentबजाय संदर्भित करने की सिफारिश की जाती है ।

— अलेक्जेंडर काचकेव

ध्यान दें कि यदि आपके पास जेनेरिक घटक है तो यह विधि काम नहीं करती है

— FunkeyFlo

Answer 2

आप React.PropsWithChildren<P>अपने प्रॉपर के लिए टाइप का उपयोग कर सकते हैं :

interface MyProps { }

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

Answer 3

आप उपयोग कर सकते हैं

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

Answer 4

सरल उत्तर: उपयोग ReactNode:

interface MyProps {
  children?: React.ReactNode
}

यदि childrenवैकल्पिक है या नहीं (यानी होने ?या नहीं) आपके घटक पर निर्भर करता है। यह ?व्यक्त करने का सबसे संक्षिप्त तरीका है, इसलिए इसमें कुछ भी गलत नहीं है।

इतिहास पर: मूल रूप से पूछे जाने पर यह सही उत्तर नहीं था: ReactNodeमार्च 2017 में इसका वर्तमान रूप टाइप किया गया था (लगभग) केवल इस पुल अनुरोध के द्वारा , लेकिन आज इसे पढ़ने वाले लगभग हर व्यक्ति को प्रतिक्रिया का आधुनिक पर्याप्त संस्करण होना चाहिए ।

अंत में, children"विशेषता" के रूप में पास होने के बारे में (जो, रिएक्ट लिंगो में, इसे "प्रोप" के रूप में पारित किया जाएगा, विशेषता नहीं): यह संभव है, लेकिन ज्यादातर मामलों में जेएसएक्स बच्चों को पास करते समय बेहतर तरीके से पढ़ता है:

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

से अधिक आसानी से पढ़ता है

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