Definitelytyped: @ types / رد فعل اجعل من الممكن تصيير سلسلة من مكون وظيفي

تم إنشاؤها على ١٣ أكتوبر ٢٠١٧ · 19تعليقات · مصدر: DefinitelyTyped/DefinitelyTyped

[x] حاولت استخدام الحزمة @types/react وواجهت مشاكل.
[x] حاولت استخدام أحدث إصدار مستقر من tsc. https://www.npmjs.com/package/typescript
[x] لدي سؤال غير مناسب لـ StackOverflow . (يرجى طرح أي أسئلة مناسبة هناك).
[x] [أذكر] (https://github.com/blog/821-mention-somebody-they-re-notified) المؤلفون (انظر Definitions by: في index.d.ts ) حتى يتمكنوا من ذلك رد.
- المؤلفون: @ johnnyreilly،benezech ، ...

مع الكتابة الحالية ، لا يمكن إنشاء مكون عديم الحالة يقوم بإرجاع سلسلة ، رقم ، منطقي ... (جديد في React 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. d.ts # L422)

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 في ٣ نوفمبر ٢٠١٨

👍27 👎2

ال 19 كومينتر

DovydasNavickassandersntkrotoff @ andy - msddwwcruzapexskierdevrelmRyanCavanaughrichsevioraonigoetzminestarksyuitsboehler @ plantain - 00 p - jackson @ miracle2kvoxmattjanmorgcerpox _ _ _ _ _ MustafaHosny اللهم امين يارب

janb87 في ١٣ أكتوبر ٢٠١٧

ربما يمكننا تحديد المكونات عديمة الحالة والمكونات المستندة إلى الفئة على أنها إرجاع ReactNode الآن. لم أقم بالترحيل إلى الإصدار 16 نعم ، لذلك سيحتاج ذلك إلى الاختبار.

يبدو أن هناك بالفعل علاقات عامة مفتوحة. https://github.com/DefinitelyTyped/DefinitelyTyped/pull/20097

apexskier في ١٦ أكتوبر ٢٠١٧

هل هذا يجري العمل على أجهزة الصراف الآلي؟

Levino في ٣٠ أكتوبر ٢٠١٧

👍2

حاولت تغييره ولكنه يكسر محلل JSX إذا كان نوع الإرجاع هو string boolean أو undefined .

polco في ٥ فبراير ٢٠١٨

هناك علاقات عامة مع TypeScript قيد التقدم حول هذا الموضوع: https://github.com/Microsoft/TypeScript/pull/20239 (حسنًا ، يتعلق الأمر بالمصفوفات ولكن بشكل عام كيف يجب أن يعرف TS ما هو مسموح به في مكون JSX)

vbfox في ٥ فبراير ٢٠١٨

رائع، شكرا لك على التحديث!

polco في ٥ فبراير ٢٠١٨

ما هو آخر ما في هذا؟ أرى أن TS PR المذكور أعلاه (https://github.com/Microsoft/TypeScript/pull/20239) مغلق / مغلق الآن. واجهت نفس الشيء اليوم ، جديد على الكتابة المطبوعة + التفاعل ، وأتساءل لماذا لا تستطيع مكوناتي إرجاع السلاسل فجأة ...

jasonrhodes في ٢٩ أغسطس ٢٠١٨

الحل هو إرجاع جزء.

return <>0</>

sonnyp في ٣٠ أكتوبر ٢٠١٨

😕28 👍27 👎1

أي أخبار بشأن هذه المسألة؟

zheeeng في ٣ نوفمبر ٢٠١٨

👍27 👎2

مرحبًا ، أي تحديث أو تلميحات حول هذا من فضلك :)؟

eltonio450 في ١٨ يناير ٢٠١٩

هذه في الأساس نسخة مكررة من # 18912. بمجرد حل Microsoft / TypeScript # 21699 ، يجب أن نكون قادرين على استخدام ReactNode كنوع إرجاع صالح لمكونات الوظيفة التي تتضمن string و boolean .

eps1lon في ١ فبراير ٢٠١٩

👍11

لتعميم المشكلة ، لماذا يجب أن تفترض ما هو شرعي لـ React؟ مع @jsx / @jsxFrag Babel pragmas ، يمكن لمقاربة مثل JSX أن تعمل مع أي وظائف. لذلك لا يجب قبول السلاسل فقط ؛ أي قيمة عائدة يمكن أن تكون مشروعة ، مقيدة فقط من خلال الاستخدام المحدد. تعتبر React مهمة ولكنها مجرد مكتبة عرض محددة.

monfera في ٢٣ أبريل ٢٠١٩

👍6 👎1

ظل هذا مفتوحًا منذ ما يقرب من عامين حتى الآن ، فهل هناك أي حل؟

حول الإرجاع المقترح ، يظهر جزء <> StringValue هنا> - أعتقد أنني أواجه مشكلة في فهم كيفية الحصول على قيمة السلسلة ، أو أي نوع آخر من القيم ليس React. عنصر يجب استخدامه حقًا في الكود - على سبيل المثال إذا لدي وظيفة تسمى Howdy return <> "hello"> وداخل componentDidMount لدي

ما يقوله const =

كيف يمكنني الحصول على قيمة السلسلة من الجزء. لا أرى طريقة ، يبدو أن أي طريقة للالتفاف حول هذا اختراق قبيح للغاية مع الأخذ في الاعتبار أن Hooks api تستخدم غالبًا لإعادة سلاسل فقط أو قيم أخرى غير React Element - على سبيل المثال https: // github. كوم / pankod / رد فعل خطافات نوع الشاشة / blob / master / src / index.js
يبدو لي أن هذا الخطأ يجعل واجهة برمجة تطبيقات Hooks غير قابلة للاستخدام ، وعلى هذا النحو يجعل Typescript غير مناسبة لـ React.

bryanrasmussen في ٢٤ يوليو ٢٠١٩

👍5

ظل هذا مفتوحًا منذ ما يقرب من عامين حتى الآن ، فهل هناك أي حل؟

bryanrasmussen راجع https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544#issuecomment -459665668 للحصول على التحديث الأخير.

eps1lon في ٢٤ يوليو ٢٠١٩

هذه المشكلة تجعلنا نكتب كود React نموذجي للتغلب على القيود التي يفرضها TypeScript. الطريقة الوحيدة لسحق هذه الأخطاء بطريقة TypeScript هي تقديم عناصر DOM إضافية و / أو React. تضيف هذه الأجزاء عبئًا (تولد القمامة) ولا حاجة إليها.

هذه ليست مشكلة دائمًا من خلال ظهورها بين الحين والآخر ويتم تشغيلها عندما تعيد أشياء صالحة من مكونات React التي ليست بالضبط JSX.Element ، على سبيل المثال ، مصفوفة.

سأكون سعيدًا بتعليق توضيحي من النوع المعقول لمساعدة الأشياء على طول ولكن لا بد لي من سحقها بأشياء غير كاملة مثل الطبقات الإضافية و / أو any . ليس جيدا.

leidegre في ٢٧ فبراير ٢٠٢٠

👍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

التفاف مع React.Fragment غير ضروري له تكلفة (غير مهمة) في وقت التشغيل.

إنه حل وسط. لا يزال ، ترغب في رؤية كتابة أفضل لهذا. أيضًا ، ليس بالأمر الهين ، يعتمد على السياق. بضع شظايا لا تؤذي ، والكثير منها سوف.

leidegre في ٤ يونيو ٢٠٢٠

👎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

نعم ، ولكن بعد ذلك أفقد أيضًا نوع التحقق من الوظيفة. أعني أنه يمكنني أيضًا إزالة TS من مشروعي دون أي عقوبة وقت تشغيل ولكن بعد ذلك ليس لدي أي فحص للنوع. لذا فإن الحل الخاص بك يعمل بالتأكيد ولكنه يكسر الغرض من TS. الإرسال إلى "ما تتوقعه" يشبه قول "حسنًا ، فلنطرح فترات الراحة. من يحتاج إلى هذا على أية حال؟". عندما تقوم بلفها في جزء ، تحصل على فحص صحيح للنوع!

Levino في ٤ يونيو ٢٠٢٠

👍8 😄2

إذن ، أي أخبار عن الإصلاح؟