구성 요소를 JSX 구성 요소로 사용할 수 없습니다.반환 형식 'Element[]'는 올바른 JSX 요소가 아닙니다.

itgroup 2023. 2. 18. 19:41

구성 요소를 JSX 구성 요소로 사용할 수 없습니다.반환 형식 'Element[]'는 올바른 JSX 요소가 아닙니다.

이 에러에 대해서 다음과 같은 에러가 발생하고 .Todos TodoApp.tsx ' 요소로 할 수 'Todos' JSX는 JSX를 사용합니다.Element [ ] xx JSX 소xx 。[]' 유형, 'Element[]' 유형에서 다음 . 'Element'는 'Element'를 'Element'로 하다.

그리고 이것은 나의 폴더 구조이다.

TodoApp.tsx

function TodoApp() {
  return (
    <Body>
      <AppDiv>
        <Form />
        <Todos />
        <Footer />
      </AppDiv>
    </Body>
  );
}

Todos.tsx

function Todos(): JSX.Element[] {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return todos
        .filter((todo) => !todo.completed)
        .map((todo: any) => (
          <>
            <ul>
              <Todo todo={todo} />
            </ul>
          </>
        ));
    }
    return todos.map((todo) => (
      <>
        <div>
          <Todo todo={todo} />
        </div>
      </>
    ));
  }

  return todos.map(() => (
    <>
      <div></div>
    </>
  ));
}

Todo.tsx

type Todo = {
  todo: TodoProps;
};

const Todo = ({ todo }: Todo) : JSX.Element => {
  const [isEditing, edit] = useState<boolean>(false);
  const dispatch = useDispatch();

  if (!isEditing) {
    return (
      <TodoDiv>
        <Li
          key={todo.id}
          completed={todo.completed}
          onClick={() => dispatch(completeTodo(todo.id))}
          // style={{
          //   textDecoration: todo.completed ? "line-through" : "none"
          // }}
        >
          {todo.text}
        </Li>
        <TodoBttns>
          <Button edit onClick={() => edit(!isEditing)}>
            <img src={editBttn} alt="Edit Button" />
          </Button>
          <Button delete onClick={() => dispatch(deleteTodo(todo.id))}>
            <img src={deleteBttn} alt="Delete Button" />
          </Button>
        </TodoBttns>
      </TodoDiv>
    );
  } else {
    return (
      <FormEdit>
        <InputForm key={todo.id} {...{ todo, edit }} />
      </FormEdit>
    );
  }
};

ToDoProps 인터페이스는 다음과 같습니다.

interface TodoProps {
  text: string;
  completed: boolean;
  id: string;
}

이미 지도 아이템을 조각으로 감싸는 수정을 시도했지만, 아직 작동하지 않습니다.이라고 할 수 있습니다.Todos.tsx와 같이function Todos(): any

참고 사항으로:스타일 컴포넌트를 사용하고 있지만 라이브러리와 관련된 문제는 아닌 것 같습니다.

구성 요소는 단일 루트 요소를 반환해야 합니다.fragment를 사용하면 fragment를 단일 루트 요소로 사용하여 요소의 배열을 단일 요소로 패키징할 수 있습니다.

이것은 아무것도 하지 않습니다.

function Todos(): JSX.Element {
  return todos.map(todo => (
    <>
      <li>{todo.task}</li>
    </>
  )
}

왜냐하면 지금 그것은 일련의 데이터를 반환하고 있기 때문이다.[<><li/></>, <><li/></>, ...]파편

fragment는 다음과 같이 사용해야 합니다.

function Todos(): JSX.Element {
  return <>{
    todos.map(todo => <li>{todo.task}</li>)
  }</>
}

반환된 모든 JSX를 1개의 fragment에 네스트합니다.

이 패턴을 사용하면 다음과 같은 문제가 발생할 수 있습니다.

function Todos(): JSX.Element {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return <>{
        todos
          .filter((todo) => !todo.completed)
          .map((todo: any) => (
            <ul>
              <Todo todo={todo} />
            </ul>
          ))
      }</>
    }
    return <>{
      todos.map((todo) => (
        <div>
          <Todo todo={todo} />
        </div>
      ))
    }</>
  }

  return <>{
    todos.map(() => (
      <div></div>
    ))
  }</>
}

// Works without error
<Todos />

return 해 주세요.JSX.Element fragment.

놀이터.

배열이 아닌 JSX 요소를 반환해야 합니다.컴포넌트 전체를 감싸는 것이 해결책이지만 지도/필터 기능 이외에서 수행해야 합니다.

Todos.tsx

function Todos(): JSX.Element {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return (
        <>
          {todos.filter((todo) => !todo.completed).map((todo: any) => (
            <ul>
              <Todo todo={todo} />
            </ul>
           ));
          }
        </>
    }
    return (
      <>
        {todos.map((todo) => (
          <div>
            <Todo todo={todo} />
          </div>
        ));
        }
      </>
  }

  return (
    <>{todos.map(() => <div />)}</>
  );
}

의 경우React ,190),16->17그런 일이 일어날 수도 있어요

이제 ,, 제를 @types/react많은 을 볼 수.npm에는 「」가 있습니다.@types/react : "*",할 수 있는 은 이 문제에 설명을 package.json:

"resolutions": {
  "@types/react": "^17.0.38"
}

React + Typescript 스택에 문제가 있는 경우 tsconfig.json에서 다음 설정을 추가해 보십시오.그것은 나에게 효과가 있었다.

"allow Synthetic Default Imports" : true

제 경우엔, 그것은 잊혀진 수입품이었습니다.기본적으로 코드 중 일부를 복사 붙여넣고 컴포넌트 중 하나를 Import하지 않았습니다.이것이 에러 메세지가 표시됩니다.

새로운 패키지를 인스톨 했을 가능성이 있습니다(실패했을 가능성이 있습니다).이 에러의 원인이 되기도 합니다.

이 경우(최근에 패키지를 설치했다가 실패했거나 취소한 경우)node_modules실행하다npm i또는yarn install다시 시도하세요.

경우에 따라서는 이 에러가 발생할 수 있습니다.switch case구문을 사용하여 컴포넌트를 렌더링합니다.

예를 들어 다음과 같습니다.

switch (loading) {
    case "pending":
      return <span>Pending</span>;
    case "succeeded":
      return <span>Succeeded</span>;
    case "failed":
      return <span>Failed</span>;

로드 상태가 잘못되어 로드에서 지정되지 않은 값이 될 수 있습니다.case컴포넌트가 반환됩니다.undefined따라서 다음 명령어를 추가해야 합니다.default값:

default: return <span>¯\_(ツ)_/¯</span>;

이 에러에 대해서도 같은 문제에 직면해 있습니다.제 패키지에 아래 코드를 추가합니다.json 파일.

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2",
  "graphql": "^16.5.0"
},

그 후, Runyarn install터미널에서

저는 좋아요.

반응 유형을 설치해야 합니다.npm install @types/react또는yarn add @types/react

이 답변은 반응 원어민에 관한 동일한 문제와 관련되어 있습니다.새로 만든 리액트 네이티브 앱에 타이프스크립트를 추가하고 App.js를 App.tsx로 이동하면 섹션이라는 컴포넌트에 동일한 오류가 발생하였습니다.나에게 해결책은 컴포넌트 타입이었다.React.Fc<{...}>이것은 수정 후 모든 오류가 사라지고 예상대로 앱이 실행되었을 때 문제가 되는 섹션 컴포넌트입니다.

 import React, { ReactNode } from 'react';
 import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
 } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
 const Section: React.FC<{  
  children: ReactNode;   
  title: string; 
}> = ({children, title}) => {
   const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
       <Text
         style={[
           styles.sectionTitle,
           {
             color: isDarkMode ? Colors.white : Colors.black,
           },
         ]}>
         {title}
       </Text>
       <Text
         style={[
           styles.sectionDescription,
           {
             color: isDarkMode ? Colors.light : Colors.dark,
           },
         ]}>
         {children}
       </Text>
     </View>
   );
 };

"Component cannot use as a JSX component" 오류의 또 다른 일반적인 원인은 컴포넌트에서 JSX 요소 또는 null 이외의 것을 반환하거나 값을 반환하는 것을 잊은 경우입니다.

반환문을 한 줄에 배치하고 JSX 코드를 괄호를 사용하지 않고 다음 줄에 배치했기 때문에 App 구성 요소가 정의되지 않은 상태로 반환됩니다.

컴포넌트에서 정의되지 않은 상태로 되돌릴 수 없으므로 오류가 발생합니다.

다음 코드 추가

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

로.tsconfig.json파일, 컴파일러 옵션

현재 코드는 다음과 같습니다.

{
  "compilerOptions": {
    "jsx":"react",
    "strict": true,
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
  }
}

이것은 "react" 모듈에 대한 참조를 발견하면 ".node_modules/@types/react" 디렉토리에서 실제 구현을 찾아야 한다고 타이프스크립트 컴파일러에 말합니다.

내 경우엔, 내가 깜빡 잊고 그 뒤에 체크하는걸렸어styled(PreviousStyledElement);내가 그것들을 넣은 후에 코드가 작동하기 시작했다.

export const MyNewStyledElement = styled(PreviousStyledElement)``;

언급URL : https://stackoverflow.com/questions/62702485/component-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not

'IT' 카테고리의 다른 글

Django queryset.values()를 json으로 시리얼화하려면 어떻게 해야 합니까? (0)	2023.02.22
Angular를 만드는 방법JS 명령으로 전파를 중지하시겠습니까? (0)	2023.02.22
동일한 쿼리에서 모든 열과 개수(*)를 선택하는 방법 (0)	2023.02.14
Oracle : 동일한 행의 서로 다른 열에서 최대값을 선택합니다. (0)	2023.02.14
동일한 페이지에서 두 개의 개별 Angular js 앱을 실행하는 방법 (0)	2023.02.14

현재글구성 요소를 JSX 구성 요소로 사용할 수 없습니다.반환 형식 'Element[]'는 올바른 JSX 요소가 아닙니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

Ajax, MySQL, Java, reactjs, Python, spring-boot, php, sql-server, powershell, C, MongoDB, WordPress, git, AngularJS, MariaDB, jQuery, oracle, JSON, Excel, JavaScript,

Today :
Yesterday :

itgroup