Definitelytyped: @ प्रकार/प्रतिक्रिया एक कार्यात्मक घटक से एक स्ट्रिंग प्रस्तुत करना संभव बनाता है

को निर्मित 13 अक्तू॰ 2017 · 19टिप्पणियाँ · स्रोत: DefinitelyTyped/DefinitelyTyped

[x] मैंने @types/react पैकेज का उपयोग करने की कोशिश की और मुझे समस्याएं हुईं।
[x] मैंने tsc के नवीनतम स्थिर संस्करण का उपयोग करने का प्रयास किया। https://www.npmjs.com/package/typescript
[x] मेरे पास एक प्रश्न है जो StackOverflow के लिए अनुपयुक्त है। (कृपया वहां कोई उपयुक्त प्रश्न पूछें)।
[x] [उल्लेख] (https://github.com/blog/821-mention-somebody-the-re-notified) लेखक (देखें Definitions by: में index.d.ts ) ताकि वे कर सकें प्रतिक्रिया.
- लेखक: @johnnyreilly , @bbenezech , ...

वर्तमान टाइपिंग के साथ एक स्टेटलेस घटक बनाना संभव नहीं है जो एक स्ट्रिंग, संख्या, बूलियन देता है ... (रिएक्ट 16 में नया)

import React from 'react'

const TestString = () => {
    return 'Test String Component'
}

const Component = () => (
    <div>
        <TestString/>
    </div>
)

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

JSX element type 'string' is not a constructor function for JSX elements.

पहली समस्या यह है कि वर्तमान में टाइपिंग में एक स्टेटलेस घटक React.Element के उदाहरण के अलावा कुछ भी वापस नहीं कर सकता है। इसे बदल दिया जाना चाहिए (मुझे लगता है, मैंने इसे render पद्धति पर परिवर्तनों पर आधारित किया है, देखें https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index. डी.टीएस#एल422)

interface StatelessComponent<P = {}> {
        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | Array<ReactElement<any>> | string | number | null;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
}

दूसरी समस्या यह है कि परदे के पीछे संकलक jsx को `React.createElement('Test String Component', null)`` में बदल देगा।

मुझे एक कंपाइलर त्रुटि मिलती है जो कह रही है कि यह मान्य मान नहीं है। ऐसा लगता है कि इसे निम्नलिखित सूची में निर्दिष्ट मानों में से एक होना चाहिए: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3465।

यह कैसे तय किया जा सकता है इस पर कोई विचार?

स्रोत

janb87

👍96 👀2

सबसे उपयोगी टिप्पणी

इस मुद्दे पर कोई खबर?

zheeeng 3 नव॰ 2018

👍27 👎2

सभी 19 टिप्पणियाँ

@DovydasNvickas @sandersn @tkrotoff @andy-ms @ddwwcruz @apexskier @devrelm @RyanCavanaugh @richseviora @onigoetz @minestarks @yuit @sboehler @ plantan-00 @ p-jackson @ miracle2k @voxmatt @morcerdjanechu @ericandersonfoxmatt @morcerdjanechu @ericandersonf @dyst5422 @rapilabs @cynecx @newyankeecodeshop

janb87 13 अक्तू॰ 2017

हम शायद स्टेटलेस और क्लास आधारित घटकों को अब ReactNode लौटाने के रूप में परिभाषित कर सकते हैं। मैंने v16 हाँ में माइग्रेट नहीं किया है, इसलिए इसके लिए परीक्षण की आवश्यकता होगी।

ऐसा लगता है कि पहले से ही एक पीआर खुला है। https://github.com/DefinitelyTyped/DefinitelyTyped/pull/20097

apexskier 16 अक्तू॰ 2017

क्या यह एटीएम पर काम कर रहा है?

Levino 30 अक्तू॰ 2017

👍2

मैंने इसे बदलने की कोशिश की लेकिन अगर रिटर्न प्रकार string boolean या undefined है तो यह जेएसएक्स पार्सर को तोड़ देता है।

polco 5 फ़र॰ 2018

इसके बारे में एक टाइपस्क्रिप्ट पीआर प्रगति पर है: https://github.com/Microsoft/TypeScript/pull/20239 (खैर इसके बारे में सरणी लेकिन आमतौर पर यह है कि टीएस को कैसे पता होना चाहिए कि जेएसएक्स घटक में क्या अनुमति है)

vbfox 5 फ़र॰ 2018

कूल, अपडेट के लिए धन्यवाद!

polco 5 फ़र॰ 2018

इस पर नवीनतम क्या है? मुझे ऊपर उल्लिखित टीएस पीआर दिखाई दे रहा है (https://github.com/Microsoft/TypeScript/pull/20239) अब बंद/लॉक हो गया है। मैं आज उसी चीज़ में भाग गया, टाइपस्क्रिप्ट + प्रतिक्रिया के लिए नया, और सोच रहा था कि मेरे घटक अचानक तार क्यों नहीं लौटा सकते ...

jasonrhodes 29 अग॰ 2018

एक टुकड़ा वापस करने के लिए एक समाधान है।

return <>0</>

sonnyp 30 अक्तू॰ 2018

😕28 👍27 👎1

इस मुद्दे पर कोई खबर?

zheeeng 3 नव॰ 2018

👍27 👎2

हैलो, कृपया इस पर कोई अपडेट या संकेत :)?

eltonio450 18 जन॰ 2019

यह अनिवार्य रूप से #18912 का डुप्लिकेट है। एक बार Microsoft/टाइपस्क्रिप्ट#21699 का समाधान हो जाने के बाद हमें फ़ंक्शन घटकों के लिए एक मान्य रिटर्न प्रकार के रूप में ReactNode का उपयोग करने में सक्षम होना चाहिए जिसमें string और boolean शामिल हैं।

eps1lon 1 फ़र॰ 2019

👍11

इस मुद्दे को सामान्य बनाने के लिए, यह भी क्यों मान लेना चाहिए कि रिएक्ट के लिए क्या वैध है? @jsx / @jsxFrag Babel pragmas के साथ, इस JSX जैसा दृष्टिकोण किसी भी कार्य के साथ काम कर सकता है। तो ऐसा भी नहीं है कि केवल तार ही स्वीकार किए जाएं; कोई भी वापसी मूल्य वैध हो सकता है, केवल विशिष्ट उपयोग से विवश। प्रतिक्रिया महत्वपूर्ण है लेकिन यह सिर्फ एक विशिष्ट प्रतिपादन पुस्तकालय है।

monfera 23 अप्रैल 2019

👍6 👎1

यह लगभग दो साल से खुला है, क्या कोई समाधान है?

सुझाए गए रिटर्न के बारे में एक टुकड़ा <>स्ट्रिंगवैल्यू यहां जाता है> - मुझे लगता है कि मुझे यह समझने में परेशानी हो रही है कि मुझे स्ट्रिंग मान कैसे मिलता है, या किसी अन्य प्रकार का मान जो प्रतिक्रिया नहीं है। वास्तव में मेरे कोड में उपयोग करने के लिए तत्व - उदाहरण के लिए यदि मेरे पास हाउडी रिटर्निंग <>"हैलो"> नामक एक फ़ंक्शन है और मेरे पास घटकडिडमाउंट के अंदर है

स्थिरांक क्या कहते हैं =

मैं खंड से स्ट्रिंग मान कैसे प्राप्त करूं। मुझे कोई रास्ता नहीं दिख रहा है, ऐसा लगता है कि इसके आसपास जाने का कोई भी तरीका एक बेहद बदसूरत हैक है और यह देखते हुए कि हुक एपीआई अक्सर स्ट्रिंग्स या अन्य गैर प्रतिक्रिया तत्व मानों को वापस करने के साथ प्रयोग किया जाता है - उदाहरण के लिए https://github. com/pankod/react-hooks-screen-type/blob/master/src/index.js
मुझे ऐसा लगता है कि यह बग वास्तव में हुक एपीआई को अनुपयोगी बनाता है, और इस तरह टाइपस्क्रिप्ट को रिएक्ट के लिए खराब फिट बनाता है।

bryanrasmussen 24 जुल॰ 2019

👍5

यह लगभग दो साल से खुला है, क्या कोई समाधान है?

@bryanrasmussen अंतिम अपडेट के लिए https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544#issuecomment -459665668 देखें।

eps1lon 24 जुल॰ 2019

यह समस्या हमें टाइपस्क्रिप्ट द्वारा लगाई गई सीमाओं के आसपास काम करने के लिए एक विशिष्ट प्रतिक्रिया कोड लिख रही है। टाइपस्क्रिप्ट तरीके से इन त्रुटियों को दूर करने का एकमात्र तरीका अतिरिक्त DOM तत्वों और/या React.Fragments को पेश करना है जो ओवरहेड जोड़ते हैं (कचरा उत्पन्न करते हैं) और उनकी आवश्यकता नहीं होती है।

यह हमेशा एक समस्या नहीं होती है, यह हर बार फसल लेता है और जब आप रिएक्ट घटकों से मान्य चीजें लौटाते हैं जो वास्तव में JSX.Element नहीं हैं, उदाहरण के लिए, एक सरणी।

मुझे चीजों की मदद करने के लिए एक समझदार प्रकार के एनोटेशन से खुशी होगी, लेकिन मुझे इन्हें अतिरिक्त परतों और/या any जैसी अपूर्ण चीजों के साथ स्क्वैश करना होगा। अच्छा नही।

leidegre 27 फ़र॰ 2020

👍15

एक अनावश्यक React.Fragment के साथ लपेटने पर रनटाइम पर एक (महत्वहीन) लागत होती है।

क्या यह बिना किसी रनटाइम पेनल्टी के एक और काम हो सकता है?

import React, { ReactElement } from 'react'

const TestString = () => {
  return ('Test String Component' as unknown) as ReactElement
}

const Component = () => (
  <div>
    <TestString />
  </div>
)

export default Component

BoogalooJB 4 जून 2020

👍4

एक अनावश्यक React.Fragment के साथ लपेटने पर रनटाइम पर एक (महत्वहीन) लागत होती है।

यह एक समझौता है। फिर भी, इसके लिए बेहतर टाइपिंग देखना चाहेंगे। इसके अलावा, महत्वहीन नहीं, संदर्भ पर निर्भर करता है। कुछ टुकड़े चोट नहीं पहुंचाते हैं, उनमें से बहुत से होंगे।

leidegre 4 जून 2020

👎1

एक अनावश्यक React.Fragment के साथ लपेटने पर रनटाइम पर एक (महत्वहीन) लागत होती है।
क्या यह बिना किसी रनटाइम पेनल्टी के एक और काम हो सकता है?
import React, { ReactElement } from 'react'

const TestString = () => {
  return ('Test String Component' as unknown) as ReactElement
}

const Component = () => (
  <div>
    <TestString />
  </div>
)

export default Component

हाँ, लेकिन फिर मैं फ़ंक्शन के लिए टाइप चेकिंग भी खो देता हूं। मेरा मतलब है कि मैं अपने प्रोजेक्ट से टीएस को बिना किसी रनटाइम पेनल्टी के भी हटा सकता हूं लेकिन फिर मेरे पास कोई टाइप चेकिंग नहीं है। तो आपका कामकाज निश्चित रूप से काम कर रहा है लेकिन टीएस के उद्देश्य को तोड़ देता है। "आप क्या उम्मीद करते हैं" को कास्ट करना "ठीक है, फिर ब्रेक को फेंक देता है। किसी भी तरह से इसकी आवश्यकता किसे है?"। जब आप इसे एक टुकड़े में लपेटते हैं, तो आपको सही प्रकार की जांच मिलती है!

Levino 4 जून 2020

👍8 😄2

तो, फिक्स पर कोई खबर?

vadimyen 28 अग॰ 2020

👎5 👍2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Definitelytyped: @ प्रकार/प्रतिक्रिया एक कार्यात्मक घटक से एक स्ट्रिंग प्रस्तुत करना संभव बनाता है

सबसे उपयोगी टिप्पणी

सभी 19 टिप्पणियाँ

संबंधित मुद्दों