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

Question

संकलक के लिए क्रम में 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> 
); 
}; 

संकलन त्रुटि का उत्सर्जन करता है:

Error:(102, 17) TS2339: Property 'children' does not exist on type 'MyProps'.

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

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

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

interface MyProps { 
    children?: React.ReactNode; 
} 

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

तो मैं children प्रोप मैन्युअल निर्धारित कर सकते हैं?

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

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

Answer 1

अभी के लिए, आप, 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> 

अब, propschildren संपत्ति के साथ-साथ MyProps इंटरफ़ेस से उन मिल गया है।

मैं 2.0.7

इसके अतिरिक्त टाइपप्रति संस्करण में इस जाँच की है, तो आप संक्षिप्तता के लिए React.SFC बजाय React.StatelessComponent उपयोग कर सकते हैं।