त्रुटि "JSX तत्व प्रकार '...' का कोई निर्माण या कॉल हस्ताक्षर नहीं है" क्या मतलब है?

Question

मैंने कुछ कोड लिखे:

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

मुझे एक त्रुटि मिल रही है:

JSX तत्व प्रकार Elemका कोई निर्माण या कॉल हस्ताक्षर नहीं है

इसका क्या मतलब है?

Answer 1

यह कंस्ट्रक्टरों और उदाहरणों के बीच एक भ्रम है ।

याद रखें कि जब आप प्रतिक्रिया में एक घटक लिखते हैं:

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

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

return <Greeter whoToGreet='world' />;

आप इसका इस तरह उपयोग नहीं करते हैं:

let Greet = new Greeter();
return <Greet whoToGreet='world' />;

पहले उदाहरण में, हम चारों ओर से गुजर रहे हैं Greeter, हमारे घटक के लिए निर्माण कार्य । यही सही उपयोग है। दूसरे उदाहरण में, हम एक उदाहरण के आसपास से गुजर रहे हैं Greeter। यह गलत है, और "ऑब्जेक्ट एक फ़ंक्शन नहीं है" जैसी त्रुटि के साथ रनटाइम में विफल हो जाएगा।

---

इस कोड के साथ समस्या

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

यह है कि यह एक उदाहरण की उम्मीद कर रहा है React.Component। आप एक फ़ंक्शन चाहते हैं, जो इसके लिए एक कंस्ट्रक्टर लेता हैReact.Component :

function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

या इसी तरह:

function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}

Comments

इस लेखन के रूप में, यदि आप @types/reactउनका उपयोग कर रहे हैं, तो इसका उपयोग करना सबसे आसान हैfunction RenderGreeting(Elem: React.ComponentType) { ... }

— Jthorpe

बस जिज्ञासु, हम function renderGreeting(Elem: typeof React.Component)ईएस 6 में कैसे लिखते हैं ?

— ब्रूस सन

धन्यवाद। अगर हम स्टेटलेस फंक्शनल कंपोनेंट पास करना चाहते हैं तो क्या होगा? मुझे लगता है कि function renderGreeting (Elem: new() => React.SFC<any>){...}अगर ऐसा है तो हम इस तरह के एसएफसी के प्रकार की घोषणा क्यों करते हैं: const Hello:React.SFC<any> = (props) => <div>Hello World</div>और नहीं:const Hello: new() =>React.SFC<any> = (props) => <div>Hello World</div>

— बेन कार्प

@ अपनी टिप्पणी पर एक जवाब और उस IMO में एक स्वीकार किया जाना चाहिए।

— टॉम हबलबोर

export const BackNavigationTextWrapper = (WrappedComponent: typeof React.Component) => { const BackNavigationTextWrappedComponent = (props, { commonElements = {} }: any) => { return <WrappedComponent {...props} backLabel={commonElements.backLabel || 'Go back to reservation details'} /> }; BackNavigationTextWrappedComponent.type = WrappedComponent.type; return BackNavigationTextWrappedComponent; }; मुझे एक त्रुटि मिल रही है "संपत्ति 'प्रकार' टाइपो कंपोनेंट 'पर मौजूद नहीं है।"

— प्रकाश पी।

Answer 2

यदि आप एक घटक वर्ग को एक पैरामीटर (बनाम एक उदाहरण) के रूप में लेना चाहते हैं, तो उपयोग करें React.ComponentClass:

function renderGreeting(Elem: React.ComponentClass<any>) {
    return <span>Hello, <Elem />!</span>;
}

Comments

अब मिश्रण में कार्यात्मक घटकों के साथ, आपको संभवतः React.ComponentType<any>उन्हें शामिल करने के बजाय प्रकार का उपयोग करना चाहिए ।

— Zack

Answer 3

जब मैं JSX से TSX में परिवर्तित कर रहा हूं और हम कुछ पुस्तकालयों को js / jsx के रूप में रखते हैं और दूसरों को ts / tsx में परिवर्तित करते हैं तो मैं TSX \ TS फ़ाइलों में js / jsx आयात विवरण बदलने के लिए लगभग हमेशा भूल जाता हूं

import * as ComponentName from "ComponentName";

सेवा

import ComponentName from "ComponentName";

यदि TSX से एक पुराने JSX (React.createClass) शैली के घटक को कॉल किया जाता है, तो उपयोग करें

var ComponentName = require("ComponentName")

Comments

मुझे लगता है कि आप चारों ओर का दूसरा मतलब है?

— एपिफ़िशफ़ार्ट १४'१art

यदि आप टाइपस्क्रिप्ट (में tsconfig.json) को कॉन्फ़िगर करते हैं तो इनपोर्ट स्टेटमेंट को बदलना आवश्यक नहीं है allowSyntheticDefaultImports। देखें: typescriptlang.org/docs/handbook/compiler-options.html और चर्चा यहाँ: blog.jonasbandi.net/2016/10/...

— jbandi

Answer 4

यदि आप वास्तव में सहारा के बारे में परवाह नहीं करते हैं तो व्यापक संभव प्रकार है React.ReactType।

यह देशी डोम तत्वों को स्ट्रिंग के रूप में पारित करने की अनुमति देगा। React.ReactTypeइन सभी को शामिल किया गया:

renderGreeting('button');
renderGreeting(() => 'Hello, World!');
renderGreeting(class Foo extends React.Component {
   render() {
      return 'Hello, World!'
   }
});

Answer 5

यदि आप सामग्री-यूआई का उपयोग कर रहे हैं , तो घटक की परिभाषा टाइप करें, जिसे टाइपस्क्रिप्ट द्वारा रेखांकित किया जा रहा है। सबसे अधिक संभावना है कि आप कुछ इस तरह देखेंगे

export { default } from './ComponentName';

त्रुटि को हल करने के लिए आपके पास 2 विकल्प हैं:

1. .defaultजब JSX में घटक का उपयोग करें:

import ComponentName from './ComponentName'

const Component = () => <ComponentName.default />

2. उस घटक को नाम दें, जिसे आयात करते समय "डिफ़ॉल्ट" के रूप में निर्यात किया जा रहा है:

import { default as ComponentName } from './ComponentName'

const Component = () => <ComponentName />

इस तरह आपको .defaultहर बार घटक का उपयोग करने की आवश्यकता नहीं है ।

Comments

इससे मुझे अपना मुद्दा ठीक करने में मदद मिली।

— व्हाइटवॉकर

Answer 6

निम्नलिखित ने मेरे लिए काम किया: https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019 मैं इसे कुछ इस तरह से करके ठीक करता हूं:

const Component = (isFoo ? FooComponent : BarComponent) as React.ElementType

Comments

धन्यवाद, यह मुझे बहुत मदद करता है। <3

— अमेरलिसिया

लेकिन यह काम क्यों करता है?

— WebBrother

Answer 7

मेरे मामले में, मैं React.ReactNodeटाइप के बजाय एक कार्यात्मक घटक के लिए एक प्रकार के रूप में उपयोग कर रहा था React.FC।

सटीक होने के लिए इस घटक में:

export const PropertiesList: React.FC = (props: any) => {
  const list:string[] = [
    ' Consequat Phasellus sollicitudin.',
    ' Consequat Phasellus sollicitudin.',
    '...'
  ]

  return (
    <List
      header={<ListHeader heading="Properties List" />}
      dataSource={list}
        renderItem={(listItem, index) =>
          <List.Item key={index}> {listItem } </List.Item>
      }
    />
  )
}

Answer 8

जैसा @Jthorpe से अवगत कराया गया, ComponentClassकेवल Componentया तो अनुमति देता है या PureComponentनहीं FunctionComponent।

यदि आप एक पास करने का प्रयास करते हैं FunctionComponent, तो टाइपस्क्रिप्ट एक त्रुटि के समान होगा ...

Type '(props: myProps) => Element' provides no match for the signature 'new (props: myProps, context?: any): Component<myProps, any, any>'.

हालाँकि, आप दोनों मामलों के लिए अनुमति देने के ComponentTypeबजाय उपयोग करके ComponentClass। प्रतिक्रिया घोषणा फ़ाइल के अनुसार प्रकार को परिभाषित किया गया है ...

type ComponentType<P = {}> = ComponentClass<P, any> | FunctionComponent<P>

Answer 9

मेरे मामले में मैं newटाइप परिभाषा के अंदर गायब था ।

some-js-component.d.ts फ़ाइल:

import * as React from "react";

export default class SomeJSXComponent extends React.Component<any, any> {
    new (props: any, context?: any)
}

और उस tsxफ़ाइल के अंदर जहाँ मैं अप्रमाणित घटक को आयात करने की कोशिश कर रहा था:

import SomeJSXComponent from 'some-js-component'

const NewComp = ({ asdf }: NewProps) => <SomeJSXComponent withProps={asdf} />

Answer 10

रिएक्ट क्लास घटक की घोषणा करते समय, React.ComponentClass इसके बजाय का उपयोग करें React.Componentयह ts त्रुटि को ठीक करेगा।

Answer 11

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

function renderGreeting(props: {Elem: React.Component<any, any>}) {
    return <span>Hello, {props.Elem}!</span>;
}

हालाँकि, निम्न कार्य करता है?

function renderGreeting(Elem: React.ComponentType) {
    const propsToPass = {one: 1, two: 2};

    return <span>Hello, <Elem {...propsToPass} />!</span>;
}