Typescript: JSX 요소 유형에는 v3.2.0-rc에서 구성 또는 호출 서명이 없습니다.

여기에는 나머지 오류 메시지가 누락되어 있지만 @types/react 의 최신 버전을 사용하고 있고 node_modules 또는 잠금 파일에 중복 된 내용이 남아 있지 않은지 확인하십시오.

편집 : 아마도 ReactType이 아닌 ComponentType을 사용하는 것을 의미합니다.

뿡뿡

최신 @types/react 16.7.7 하고 @types/react 에서 yarn.lock @types/react 중복 항목이 없는지 확인했습니다.
@types/react 중복으로 인해 문제가 발생한 경우 Duplication of definition ... 오류가 반환됩니다.

"typescript": "^3.1.6" 로 되 돌리면 정상적으로 작동합니다.

타이프 스크립트 3.2.1

다른 예

interface P1 {
  p?: boolean
  c?: string
}

interface P2 {
  p?: boolean
  c?: any // if you replace c with string, error goes away
  d?: any
}

declare var C: React.ComponentType<P1> | React.ComponentType<P2>


const a = <C p={true} /> // element does not have any ...

문제는 새로운 "nullable 판별"변경과 관련된 것 같습니다. ts가 해당 유형에 대한 공통 인터페이스를 찾을 수없는 것 같습니다.
다른 예

interface P1 {
  p?: any
  c?: string // remove this and it's ok
}

interface P2 {
  p?: boolean
}

비슷한 문제가 있습니다. 빠른 예 :

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface EmptyProps {
}

interface Props {
  a?: string
}

type HProps = {
  configEmpty: Config<EmptyProps>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<EmptyProps> = configEmpty.ElementType // assigned
  const B: React.ReactType<EmptyProps> = 'div' // assigned

  const C: React.ReactType<Props> = config.ElementType // assigned
  const D: React.ReactType<Props> = 'div' // in this case assignment failed

  return (
    <div>
      <A/> {/* TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      <B/>

      <C/>
      <D/>
    </div>
  )
}

export default H

A 및 B 의 유형 이 B 및 D 에는 _ 유사한 유형 _이 있지만 D 는 할당 할 수 없습니다 🤔

저장소의 코드 : https://github.com/layershifter/ts-issue

const 사용하고 있기 때문에 그렇지 않습니다. A 은 typeof configEmpty.ElementType 이지만 B 은 'div' 입니다. let 사용하면 둘 다에서 동일한 동작을 보여줍니다.

@Kovensky A 및 C 어떻습니까? C 작동하지만 A 가 does not have any construct 오류로 실패하는 이유는 무엇입니까?

그것은 당신이 제공하는 소품을받을 수없는 구성 요소를 제외하도록 ReactType 유형을 개선했기 때문입니다. 어떤 DOM 요소도 { a: string | undefined } 받을 수 없기 때문에 모두 제외되고 함수 / 클래스 구성 요소 만 할당 할 수 있습니다.

@Kovensky 감사합니다 👍 이제 과제에 대한 문제는 분명하지만 이건 어떨까요?

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface Empty {}
interface Props { a?: string }

type HProps = {
  configEmpty: Config<Empty>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<Empty> = configEmpty.ElementType // is React.ReactType<Empty>
  const B: React.ReactType<Empty> = 'div' // is string
  const C: React.ReactType<Props> = config.ElementType // is React.ReactType<Props>

  return (
    <div>
      {/* React.ReactType<Empty> */} <A/> {/* <--- TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      {/* React.ReactType<Empty> */} <B/>
      {/* React.ReactType<Props> */} <C/>
    </div>
  )
}

export default H

A 및 B 에는 명백하게 정의 된 유형이 동일합니다. A 가 실패하는 이유는 무엇입니까? 정말 혼란 스러워요.

@rexpan 과 @goloveychuk 의 오류는 조건부 JSX 생성자를 기반으로 # 28795 및 # 28768과 유사합니다.

흠, 그래서 문제는 ReactType<any> 가 _every builtin jsx tag _ (+ ComponentType<any> 더해 주지만 그 부분은 문제가되지 않습니다)의 합집합을 반환하고, 해당 구성 요소의 서명이 간단하지 않다는 것입니다. 다른 모든 것을 완벽하게 포함하는 서명이 아닙니다.) 이것도 수정하기 위해 # 7294에 의존합니다. 플러스 측면에서보고되는 이러한 모든 JSX 문제를 해결하는 데 필요한 기본 변경 사항은 동일합니다.

컨텍스트를 위해 다음과 같은 유형을 효과적으로 제조합니다.

declare const JsxSigs: {[K in keyof JSX.IntrinsicElements]: ((props: JSX.IntrinsicElements[K]) => JSX.Element)}[keyof JSX.IntrinsicElements];

이는 수많은 고유 서명의 조합으로 끝납니다.

내가 모든 내장 jsx 태그의 합집합으로 변경하기 전에는 _just_ string | ComponentType<any> 였는데, 더 나빴습니다.

예, 특히 3.2 이전부터는 태그에 string 유형이 조용히 _disabled_ typechecker입니다. 왜냐하면 발행해야했던 "인덱스를 찾을 수 없음"오류가 발생하지 않았기 때문입니다.

이 문제는 중복으로 표시되었으며 마지막 날에는 활동이 없었습니다. 자동 청소를 위해 폐쇄되었습니다.

관련이있을 수있는 문제가 발생합니다. 다음 구성 요소가 있습니다.

function MaybeLabel(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'label' : 'div';

   return <TagName>Woookie</TagName>
}

결과적으로

error TS2604: JSX element type 'TagName' does 아님 have any construct or call signatures.

동안

function MaybeLabel2(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'span' : 'div';

   return <TagName>Woookie</TagName>
}

typescript 컴파일러에서 완전히 허용됩니다. 그대로:

export function MaybeLabel3(props: { useLabel: boolean }) {
    const { useLabel } = props;
    const TagName = useLabel ? 'label' : 'div';

    return React.createElement(TagName, 'Wookie')
}

유일한 차이는 어디에서 MaybeLabel2 내가 사용하고 있다는 것입니다 span 대신 label (사용 span 대신 div 도 가능 보인다 ). MaybeLabel3 는 정확히 MaybeLabel 컴파일하는 것과 같아야하기 때문에 더 이상하게 만듭니다.

최신 버전의 @ types / react 및 @ types / react-dom을 사용하고 typescript 3.2.1, 3.2.2 및 3.3.0-dev.20181219에서 문제를 확인했습니다. 3.1.6에서는 모두 예상대로 작동합니다 (예제 중 어느 것도 오류를 생성하지 않음).

나에게 해결책은 다음과 같습니다.

export type WrapperProps = {
    mainApp: React.ElementType
}

@ TacB0sS 자세히 설명 해주세요.

스레드를 오해했을 수도 있지만 jsx 요소에 대한 참조를 다른 jsx 요소에 전달하고 싶었습니다.

export const AppWrapper = hot(module)((props: WrapperProps) => {

    const MainApp = props.mainApp;
    if (!MainApp)  // <-- JSX elements MUST start with upper case!!
        throw new ImplementationMissingException("mainApp was not specified!!");

    return (
        <Router history={BrowserHistoryModule.getHistory()}>
            <MainApp prop1={"value"}/>
        </Router>)
});

함께 :

export type WrapperProps = {
    mainApp: React.ElementType<{prop1:string}>
}

@ TacB0sS 저에게 주요 트릭은 if 조건을 추가하는 것이 었습니다. React.ComponentType 또는 React.ElementType 사용 여부는 중요하지 않은 것 같습니다.

이 결과를 이해했는지 잘 모르겠습니다. 해결할 수없는 유사한 오류가 있습니다. 내 사용 사례는 다음과 같습니다.

// Logo.tsx

import classNames from 'classnames';

interface Props extends React.HTMLAttributes<HTMLElement> {
  tag?: React.ReactType;
}

const Logo: React.SFC<Props> = props => {
  const { tag: Tag = 'div', className, ...rest } = props;
  return (
    <Tag
      className={classNames(styles.logo, className)}
      {...rest}
      dangerouslySetInnerHTML={{ __html: logo }}
    />
  );
};

그런 다음 다른 구성 요소에서 다음과 같이 사용하고 있습니다.

const Header: React.SFC<{}> = () => {
  return (
    <div>
      <Logo tag="h1" aria-label="Syn By Design: Eric Masiello's Portfolio" />
      Header online
    </div>
  );
};

컴파일러를 실행할 때이 오류가 발생합니다.

components/Logo.tsx:13:6 - error TS2604: JSX element type 'Tag' does not have any construct or call signatures.

13     <Tag
        ~~~


Found 1 error.

이 작업을 수행하는 방법에 대한 아이디어가 있습니까?

Component 대신 ComponentClass

기본값을 가져 왔지만 해당 내보내기를 .d.ts 파일에서 기본값 대신 이름으로 선언했기 때문에이 오류가 발생했습니다.

여기에 추가하고 싶었습니다. 이것이 이미 언급되었는지 확실하지 않지만 고용자 주문 구성 요소를 수행하는 경우 React.ComponentType 유형을 사용하고 싶습니다.

. " https://flow.org/en/docs/react/types/#toc -react-componenttype"

@ericmasiello 동적으로 전달되는 구성 요소에 React.ElementType 를 사용했습니다. 내 사용 사례는 기본적으로 다음과 같습니다.

type Props = {
    heading: React.ElementType
}
const Header: FC<Props> = props => {
    const Header = props.heading ?? 'h2';
    return (
        <Header className="some-class"><children /></Header>
    )
}

@ericmasiello 동적으로 전달되는 구성 요소에 React.ElementType 를 사용했습니다. 내 사용 사례는 기본적으로 다음과 같습니다.

type Props = {

    heading: React.ElementType

}

const Header: FC<Props> = props => {

    const Header = props.heading ?? 'h2';

    return (

        <Header className="some-class"><children /></Header>

    )

}

멋있는! 어떤 버전의 Typescript와 어떤 버전의 @ types / react를 설치 했습니까?

안녕하세요.

멋있는! 어떤 버전의 Typescript와 어떤 버전의 @ types / react를 설치 했습니까?

[email protected]
@ types / [email protected]

다음 두 가지 중 하나를 수행하여이 문제를 해결했습니다.

사례 1 :

.d.ts 파일 :

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   class MyTypedComponent extends React.Component<PropFoo> { }
}

반응 :

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Notice in here we have to use the dot operator and reference the component */
   return <MyTypedComponent.MyTypedComponent /> 
}

새로 입력 된 구성 요소를 사용하려면 _MyTypedComponent.MyTypedComponent_를 작성해야합니다. 이것은 어떤 사람들에게는 분명 할 수 있지만, 가져 오기에 도트 연산자를 사용하고 구성 요소를 참조하는 것이 전부 였을 때 많은 시간을 낭비했습니다.

사례 2 [사례 1을 작성하는 또 다른 방법] :

.d.ts 파일 :

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   export default class MyTypedComponent extends React.Component<PropFoo> { } //Notice the export default in here
}

반응 :

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Since this component is default exported, no need to use the dot operator */
   return <MyTypedComponent /> 
}

Soo, 기본적으로 내보내기, 기본 내보내기 및 가져 오기를 확인하고 올바르게 참조하고 있는지 확인하십시오.

제 영어에 대해 유감이며 도움이 되었기를 바랍니다.

나에게 해결책은 다음과 같습니다.

export type WrapperProps = {
  mainApp: React.ElementType
}

niu b