我目前在 Todos 上遇到以下错误内部组件 TodoApp.tsx : 'Todos' 不能用作 JSX 组件。
它的返回类型 'Element[]' 不是有效的 JSX 元素。
类型“元素 []”缺少类型“元素”的以下属性:类型、 Prop 、键
这是我的文件夹结构TodoApp.tsx
function TodoApp() {
return (
<Body>
<AppDiv>
<Form />
<Todos />
<Footer />
</AppDiv>
</Body>
);
}
Todos.tsxfunction 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.tsxtype 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>
);
}
};
interface TodoProps {
text: string;
completed: boolean;
id: string;
}
Todos.tsx 的顶部声明像这样 function Todos(): any附带说明:我正在使用样式化组件，但我认为问题与库无关。
最佳答案
组件需要返回单个根元素。通过将片段用作单个根元素，您可以使用片段将元素数组打包为单个元素。
所以这什么都不做:
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>)
}</>
}
使用这种模式，你最终可能会得到这样的结果:
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 />
JSX.Element : 片段。Playground
关于reactjs - 组件不能用作 JSX 组件。它的返回类型 'Element[]' 不是有效的 JSX 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62702485/