我目前在Todos内部组件上收到以下错误TodoApp.tsx：“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) => …我目前无法使用 Material UI 将复选框的大小更改为自定义大小。代码如下
<Checkbox
label="Check this box"
onChange={() => dispatch(switchCompleted())}
checked={status.showCompleted}
style={{
color: "#00e676",
width: 36,
height: 36
}}
/>
我也尝试使用，size: 'medium'但复选框的大小仍然很小。有谁知道如何解决这个问题？
尝试加载 Google 字体时遇到以下问题。我读到我应该写这样的东西_document.js来将它导入到 head 标签中
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link
rel="preload"
href="/fonts/noto-sans-v9-latin-regular.woff2"
as="font"
crossOrigin=""
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
但这是我必须使用的代码才能使 Styled Components 与 Next.js 一起使用
import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static …