组件不能用作 JSX 组件。其返回类型“ Element []”不是有效的 JSX 元素
我当前在 TodoApp.tsx中的 Todos组件上得到以下错误: ‘ Todos’不能用作 JSX 组件。
它的返回类型‘ Element []’不是有效的 JSX 元素。
类型“ Element []”缺少类型“ Element”的以下属性: Type、 props、 key
这是我的文件夹结构
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
顺便说一句: 我使用的是 Styled 组件，但我不认为这个问题与库有关。
