Definitelytyped: प्रतिक्रिया घटकों को ReactNode वापस करना चाहिए, या बच्चों को ReactElement होना चाहिए

मैंने index.d.ts . के लिए निम्नलिखित सुधारों की कोशिश की

-        render(): JSX.Element | null | false;
+        render(): ReactNode;

-        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
+        (props: P & { children?: ReactNode }, context?: any): ReactNode;

लेकिन मुझे हर जगह त्रुटियां मिलीं, जब मैं यह बताने की कोशिश कर रहा था कि मुझे यकीन नहीं है कि कैसे ठीक किया जाए।

TypeScript compile error: JSX element type 'ReactNode' is not a constructor function for JSX elements.

नहीं, यह परिवर्तन गलत है। आप वर्तमान में रिएक्ट में कई तत्वों को वापस नहीं कर सकते। यहां तक ​​कि अगर आप इसे कहीं भी करते हैं, तो संभवत: यह किसी भी तरह एक ही में समाहित है।
केवल फाइबर के साथ रिएक्ट 16 में यह संभव हो सकता है :)

सुनिश्चित नहीं है कि उन्होंने प्रतिक्रिया व्यवहार बदल दिया है, लेकिन रेडक्स / प्रतिक्रिया लेखक ने पतले रैपर बनाने के लिए इसे वापस करने की क्षमता का प्रदर्शन किया। (केवल तत्वों में चाइल्डकॉन्टेक्स्ट जोड़ने के लिए), जैसा कि https://egghead.io/lessons/ जावास्क्रिप्ट-रेडक्स-पासिंग-द-स्टोर-डाउन-निहित-के माध्यम से-संदर्भ

प्रतिक्रिया-मूल आपको प्रस्तुत करने से जेएसएक्स तत्वों की एक सरणी वापस करने की अनुमति देता है, हालांकि। चारों ओर एक काम this.props.children को React.Children.only(this.props.children) $ के साथ लपेटना है और यदि रूट के रूप में एक से अधिक तत्व हैं तो यह फेंक देगा

ठीक है, आप React.Children.only का उपयोग कर सकते हैं लेकिन ReactNode और ReactElement दोनों $ this.props.children के मान्य मान हैं।

const Title = props => <h1>{props.children}</h1>;
<Title>Woah</Title>

वैध और उचित प्रतिक्रिया कोड है।

आप प्रतिक्रिया 16 में तत्वों की एक सरणी वापस कर सकते हैं, लेकिन टीएस एक त्रुटि फेंकता है क्योंकि यह सोचता है कि आप नहीं कर सकते।

संपादित करें: इसे ठीक करने के लिए इसे children: JSX.Element[]; करें

मेरे अब तक के अनुभव से, ऐसा लगता है कि ReactNode मान्य होना चाहिए।

const Id: React.SFC<{}> = (props) => props.children

const App = ()= > <Id>This should work but instead fails</Id>

क्या कोई संभावना है कि यह @types/react में दिखाई देगा?

इसके बिना मैं रिएक्ट चिल्ड्रन टाइप नहीं कर पा रहा हूँ

मैं वर्तमान में इसे प्राप्त करने के लिए children को React.Fragment में लपेट रहा हूं।

उस पर कोई अपडेट?

सुनिश्चित नहीं है कि यह children को React.Fragment में लपेटने से कम या ज्यादा सही है, लेकिन मुझे ऐसा करने का सौभाग्य मिला है

return (children as React.ReactElement);

return <>{foo(}</>; पूरी रात। <> एक समाधान है।

यह मेरे लिए भी समस्या पैदा कर रहा है।

टीएल; डॉ:

मेरे पास एक एचओसी है जो किसी दिए गए घटक में प्रोप जोड़ता है, और मैं इसे एक कार्यात्मक घटक के साथ उपयोग करने का प्रयास कर रहा हूं जिसमें return children; है। यह केवल तभी काम करता है जब मैं वर्कअराउंड का उपयोग करता हूं return <>{children}</>; ।

अधिक जानकारी:

यहाँ HOC का एक सरलीकृत संस्करण है:

export interface ExtraProps {
  extraProp1: string;
}

export const withExtraProps = <P extends object>(Component: React.ComponentType<P>) => {
  return class extends React.Component<Omit<P, keyof ExtraProps>> {
    render() {
      const extraProps = {
        extraProp1: 'test'
      };

      return (
        <Component {...this.props as P} {...extraProps} />
      )
    }
  }
}

यहाँ कार्यात्मक घटक का एक सरलीकृत संस्करण है:

interface ComponentProps extends ExtraProps {
  children?: React.ReactNode;
  loadingComponent?: ReactElement;
}

export function ExampleComponent(props: ComponentProps) {
  const { children, loadingComponent } = props;

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      await someAsyncCall();
      setLoading(false);
    }

    fetchData();
  });

  if (loading) {
    return loadingComponent || null;
  }

  return children;
}

// This line errors:
export const FeatureFlag = withExtraProps(ExampleComponent);

मुझे निम्नलिखित त्रुटि मिलती है:

Argument of type '(props: ComponentProps) => {} | null | undefined' is not assignable to parameter of type 'ComponentType<ComponentProps>'.
  Type '(props: ComponentProps) => {} | null | undefined' is not assignable to type 'FunctionComponent<ComponentProps>'.
    Type '{} | null | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
      Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

अगर मैं उदाहरण कॉम्पोनेंट में ReactElement | null का रिटर्न प्रकार जोड़ता हूं, तो यह एचओसी को पास करने के बारे में शिकायत करना बंद कर देता है, लेकिन फिर भी त्रुटियां जहां मैं बच्चों को वापस कर रहा हूं:

export function ExampleComponent(props: ComponentProps): ReactElement | null {
  ...
  ...
  return children; // Type 'ReactNode' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

}

यहां अन्य लोगों की तरह, अगर मैं इसे return <>{children}</>; में बदलता हूं, तो यह काम करता है, लेकिन यह स्थूल और अनावश्यक लगता है।

मेरे पास _exact_ @kyrstenkelly के समान समस्या है - एक HOC फ़ंक्शन को React.FC पारित किया जा रहा है जो इसके बच्चों को प्रस्तुत करता है।

<> children(...) </> फिक्स काम करता है, लेकिन क्या अभी तक कोई बेहतर समाधान है?

साथ ही यह समस्या हो रही है! वर्तमान में React.Fragment के साथ समाधान लपेटने का सुझाव समाधान कर रहा है

मेरा भी यही विचार है

interface IIntlMessageProps {
    id: string;
    valuesGiven?: {[key:string]:string};
}

// this doesn't work - -- TS2769 Type 'null' is not assignable to type '(nodes:ReactNodeARray) => ReactNode' | ... | undefined
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            {props.children}
        </FormattedMessage>
    )
};
//Nope -- TS2769 Type 'Element' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            <React.Fragment>{props.children}</React.Fragment>
        </FormattedMessage>
    )
};

// Nope -- TS2769 Type 'Element' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> | null = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            <>{props.children}</>
        </FormattedMessage>
    )
};

// Nope -- TS2769 Type '{}' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            {props.children ? props.children : undefined}
        </FormattedMessage>
    )
};

मेरा मानना ​​​​है कि मैंने यहां सलाह दी गई हर चीज की कोशिश की है ... :( कोई सुराग?

समाधान यह है कि आपको इसे टुकड़े में लपेटने की जरूरत है।

import React from 'react'

const Something: React.FC = ({ children }) => (
 <> { children } </>
)

यह Type '({ children }: { children?: ReactNode; }) => ReactNode' is not assignable to type 'FunctionComponent त्रुटि को ठीक कर देगा।

यदि संभव हो, तो मैं टुकड़ों से बचना चाहता हूं और जेएसएक्स प्रकार प्रणाली को उसी प्रकार के निर्माणों का समर्थन करना चाहता हूं जो जावास्क्रिप्ट और फ्लो रिएक्ट का समर्थन करता है, जो टाइपस्क्रिप्ट को तीसरे पक्ष के पुस्तकालय पैटर्न के साथ बेहतर तरीके से काम करने में मदद करता है।

एक और गैर-आदर्श मुझे लगता है कि टुकड़े घटक पेड़ को गहरा करते हैं, खासकर उपयोगिता/आवरण घटकों (केस-इन-पॉइंट: प्रतिक्रिया-प्लेसहोल्डर) में। React.ReactElement को कास्ट करना इस तरह के पुस्तकालयों में एक बेहतर दृष्टिकोण की तरह लगता है, लेकिन मुझे कास्ट करने की आवश्यकता नहीं है।

मैंने उस प्रकार को बदलने के लिए एक दृष्टिकोण की कोशिश की, लेकिन नए प्रकार के कार्यात्मक घटक का उपयोग करके जेएसएक्स टाइपचेकिंग के साथ फंस गया। मेरे पास अभी भी शाखा है, मैं शपथ ले सकता था मैंने मदद के लिए एक पीआर बनाया था, इसे वापस नहीं ढूंढ सकता ...

ठीक है, अगर टाइप को नोड्स के सरणियों को अस्वीकार करने की आवश्यकता है, तो इसका मतलब यह नहीं है कि इसे ReactText , ReactPortal , boolean , null , और undefined को अस्वीकार करना चाहिए। ReactElement का क्या उपयोग करता है।

इन अतिरिक्त प्रकारों को प्रतिबंधित करने का क्या औचित्य है?