问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

组件不能用作 JSX 组件。它的返回类型 'Element\[\]' 不是有效的 JSX 元素

社区维基
1
新手上路，请多包涵

我目前在 --- 内的 TodoApp.tsx Todos 组件上遇到以下错误：“Todos”不能用作 JSX 组件。它的返回类型 ‘Element[]’ 不是有效的 JSX 元素。类型“元素 []”缺少类型“元素”的以下属性：类型、道具、键

这是我的文件夹结构

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

附带说明：我正在使用样式化组件，但我认为问题与库无关。

原文由 Ramiro Herrera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译reactjstypescript
阅读 3.6k
1 个回答
得票最新
社区维基
1

组件需要返回单个根元素。您可以使用片段将元素数组打包为单个元素，方法是将片段用作单个根元素。

所以这什么都不做：

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

因为它现在返回一个数组 [<><li/></>, <><li/></>, ...] 。该片段需要是单个根元素。

您需要像这样使用片段：

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

您将所有返回的 JSX 嵌套在一个片段中。

使用该模式你可能会得到这样的结果：

 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 ：片段。

操场

原文由 Alex Wayne 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题