Definitelytyped: @types/react 기능 구성 요소에서 문자열을 렌더링할 수 있도록 합니다.

@DovydasNavickas @sandersn @tkrotoff @andy-ms @ddwwcruz @apexskier @devrelm @RyanCavanaugh @richseviora @onigoetz @minestarks @yuit @sboehler @ plantain-00 @p - jackson @ miracle2k @voxmatt @morgasparx @janechuando @dyst5422 @rapilabs @cynecx @newyankeecodeshop

현재 ReactNode 를 반환하는 상태 비저장 및 클래스 기반 구성 요소를 정의할 수 있습니다. v16으로 마이그레이션하지 않았으므로 테스트가 필요합니다.

이미 PR이 열린 것 같습니다. https://github.com/DefinitelyTyped/DefinitelyTyped/pull/20097

이것은 atm에서 작동합니까?

변경을 시도했지만 반환 유형이 string boolean 또는 undefined 이면 JSX 파서를 중단합니다.

진행 중인 TypeScript PR이 있습니다. https://github.com/Microsoft/TypeScript/pull/20239 (배열에 관한 것이지만 일반적으로 TS가 JSX 구성 요소에서 허용되는 항목을 알아야 하는 방법입니다)

업데이트 감사합니다!

이것에 대한 최신 정보는 무엇입니까? 위에서 언급한 TS PR(https://github.com/Microsoft/TypeScript/pull/20239)이 이제 닫히거나 잠겨 있습니다. 나는 오늘 typescript + react를 처음 접했고 왜 내 구성 요소가 갑자기 문자열을 반환할 수 없는지 궁금합니다...

해결 방법은 조각을 반환하는 것입니다.

return <>0</>

이 문제에 대한 소식이 있습니까?

안녕하세요, 이에 대한 업데이트나 힌트 부탁드립니다 :) ?

이것은 본질적으로 #18912의 복제본입니다. Microsoft/TypeScript#21699가 해결되면 string 및 boolean 를 포함하는 함수 구성 요소에 대한 유효한 반환 유형으로 ReactNode 를 사용할 수 있습니다.

문제를 일반화하기 위해 왜 React에 대해 합법이라고 가정해야 합니까? @jsx / @jsxFrag Babel pragma를 사용하면 이 JSX와 같은 접근 방식이 모든 기능에서 작동할 수 있습니다. 따라서 문자열만 허용되어야 하는 것은 아닙니다. 모든 반환 값은 합법적일 수 있으며 특정 용도로만 제한됩니다. React는 중요하지만 특정 렌더링 라이브러리일 뿐입니다.

오픈한지 거의 2년이 다 되어가는데 해결책이 없을까요?

제안된 반환 조각 <>StringValue가 여기에 표시됨> - 문자열 값을 얻는 방법이나 내 코드에서 실제로 사용할 React.Element가 아닌 다른 유형의 값을 얻는 방법을 이해하는 데 문제가 있는 것 같습니다. 예를 들어 다음과 같은 경우 <>"hello">를 반환하는 Howdy라는 함수가 있고 componentDidMount 내부에

const whatSays =

조각에서 문자열 값을 얻는 방법은 무엇입니까? 방법이 없습니다. 이 문제를 해결하는 방법은 매우 추악한 해킹이며 Hooks API가 종종 문자열 또는 기타 비 React Element 값(예 : https://github)을 반환하는 데 사용된다는 점을 고려하면 느낌이 듭니다. com/pankod/react-hooks-screen-type/blob/master/src/index.js
이 버그로 인해 Hooks API를 사용할 수 없게 되어 Typescript가 React에 적합하지 않은 것 같습니다.

오픈한지 거의 2년이 다 되어가는데 해결책이 없을까요?

@bryanrasmussen 마지막 업데이트는 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544#issuecomment -459665668을 참조하세요.

이 문제로 인해 TypeScript에 의해 부과된 제한 사항을 해결하기 위해 일반적인 React 코드를 작성하게 되었습니다. TypeScript 방식으로 이러한 오류를 처리하는 유일한 방법은 추가 DOM 요소 및/또는 React.Fragments를 도입하는 것입니다. 이러한 요소는 오버헤드를 추가하고(가비지 생성) 필요하지 않습니다.

이것이 항상 문제가 되는 것은 아니며 정확히 JSX.Element가 아닌 React 구성 요소(예: 배열)에서 유효한 항목을 반환할 때 트리거됩니다.

나는 일을 돕기 위해 합리적인 유형 주석에 만족하지만 추가 레이어 및/또는 any 와 같은 불완전한 것들로 이것들을 부수어야 합니다. 안좋다.

불필요한 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

불필요한 React.Fragment 로 래핑하면 런타임에 (사소하지 않은) 비용이 발생합니다.

타협입니다. 그래도 더 나은 타이핑을 보고 싶습니다. 또한 중요하지 않은 것은 컨텍스트에 따라 다릅니다. 몇 조각은 아프지 않고 많은 조각이 상처를 줄 것입니다.

불필요한 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의 목적을 깨뜨릴 뿐입니다. "기대하는 것"으로 캐스팅하는 것은 "좋아, 그럼 쉬는 시간을 버리자. 누가 이것을 필요로 하느냐?"라고 말하는 것과 같습니다. 조각으로 감쌀 때 올바른 유형 검사를 얻습니다!

그래서 수정 소식이 있습니까?