react 问题解决
1. Plugin "react" was conflicted between "package.json » eslint-config-react-app »
rm -rf node_modules
rm pnpm-lock*
pnpm install
2. React 组件的名称首字母必须大写
3. JSX 语法注意事项
JSX 语法返回值可以写在同一行。
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
如何 JSX 返回值如果不处于同一行的话，需要用小括号包裹起来。
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
JSX 返回值只能够有一个顶级元素。
如果要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。
return (
<div>
<h1>海蒂·拉玛的待办事项</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>...</li>
</ul>
</div>
);
如果不想使用 <div></div> 可以使用 <></>
return (
<>
<h1>海蒂·拉玛的待办事项</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</>
);
标签必须闭合
<img>必须写成<img/><li>xxx必须改成<li>xxx</li>
使用驼峰式命名法给大部分属性命名
例如：className、strokeWidth 等。
具体见文档：https://zh-hans.react.dev/reference/react-dom/components/common
4. 永远不要再组件里面嵌套定义组件
错误做法：
export default function Gallery() {
// 🔴 永远不要在组件中定义组件
function Profile() {
// ...
}
// ...
}
正确做法：
export default function Gallery() {
// ...
}
// ✅ 在顶层声明组件
function Profile() {
// ...
}
5. 引入组件
下面 2 种方法均可。
import Gallery from './Gallery.js';
import Gallery from './Gallery';
6. 默认导出与具名导出
一个文件中，有且仅有一个默认导出，任意个具名导出。
默认导入/导出
export default function Button() {
// ....
}
import Button from './Button.js';
默认导入时，可以在 import 后面随意命名。
import Banana from './Button.js';
具名导入/导出
export function Button() {
}
导入、导出的名称必须一致。
import {Button} from './Button.js';
7. 在 JSX 中使用 JavaScript
通过 {} 来使用 js。
export default function TodoList() {
const name = 'Gregorio Y. Zara';
return (
<h1>{name}的待办事项列表</h1>
);
}
哪里可以使用大括号？
- JSX 标签内的文本
<h1>{name}'s To Do List</h1>有效<{tag}>Gregorio Y. Zara's To Do List</{tag}>无效
- 紧跟在
=符合后面的属性src={avatar}读取 avatar 变量 正确使用src="{avatar}"只会传一个字符串{avatar}错误使用, JSX 内引号的值会作为字符串传递给属性。
双大括号 {{}}
export default function TodoList() {
return (
<ul style={{
backgroundColor: 'black',
color: 'pink'
}}>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
);
}