"জেএসএক্স উপাদান উপাদান টাইপ '...' তে কোনও নির্মাণ বা কল স্বাক্ষর নেই" এর ত্রুটিটি কী বোঝায়?

Question

আমি কিছু কোড লিখেছি:

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

আমি একটি ত্রুটি পাচ্ছি:

জেএসএক্স উপাদান ধরণের 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)ES6 তে লিখব ?

— ব্রুস সান

ধন্যবাদ। যদি আমরা একটি রাষ্ট্রবিহীন ক্রিয়ামূলক উপাদানটি পাস করতে চাই তবে কী হবে? আমার ধারণা 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>

— বেন কার্প

@ আপনার মন্তব্যটির উত্তর এবং সেই আইএমওতে স্বীকৃত একটি হওয়া উচিত।

— টোম হ্যাবলবাউয়ার

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>এটি অন্তর্ভুক্ত করার পরিবর্তে প্রকারটি ব্যবহার করা উচিত।

— জ্যাক

Answer 3

আমি যখন জেএসএক্স থেকে টিএসএক্সে রূপান্তর করছি এবং আমরা কিছু লাইব্রেরি জেএস / জেএসএক্স হিসাবে রাখি এবং অন্যকে টিএস / টিএসএক্সে রূপান্তর করি তখন আমি প্রায় সবসময়ই টিএসএক্স \ টিএস ফাইলগুলিতে জেএস / জেএসএক্স আমদানির বিবৃতিগুলি পরিবর্তন করতে ভুলে যাই from

import * as ComponentName from "ComponentName";

প্রতি

import ComponentName from "ComponentName";

যদি টিএসএক্স থেকে কোনও পুরানো জেএসএক্স (React.createClass) শৈলী উপাদান কল করে, তবে ব্যবহার করুন

var ComponentName = require("ComponentName")

Comments

আমার মনে হয় আপনি অন্যভাবে বোঝাচ্ছেন?

— apieceofbart

আপনি যদি টাইপস্ক্রিপ্ট কনফিগার করেন তবে ইনপোর্ট স্টেটমেন্ট পরিবর্তন করার প্রয়োজন নেই (যেমন ইন 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';

ত্রুটিটি সমাধান করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে:

1. জেএসএক্সে উপাদানটি .defaultব্যবহার করার সময় যুক্ত করুন:

import ComponentName from './ComponentName'

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

আমদানি করার সময় "ডিফল্ট" হিসাবে রফতানি করা উপাদানটি পুনরায় নামকরণ করুন:

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

— আমেরেলিকাএ

তবে কেন এটি কাজ করে?

— ওয়েবব্রোথ

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আপনি উভয় ক্ষেত্রেই অনুমতি দিন using প্রতিক্রিয়া ঘোষণার ফাইল অনুযায়ী টাইপটি সংজ্ঞায়িত করা হয় ...

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এটি টিএস ত্রুটিটি ঠিক করবে।

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>;
}