Address：React 中文文档（Beta 版） | React 中文文档 | React 中文网 (bootcss.com)；快速入门 – React 中文文档 (docschina.org)
Date：2024-07-18
注：该文章中与 Vue 通用的概念已被略过，仅作为学习 React 新概念的笔记总结。
1. 快速入门
学习 React 的基本概念。
2. 描述 UI
学习如何创建、自定义以及根据条件显示 React 组件。
使用 JSX 书写标签语言
a. JSX 规则：
-
只能返回一个根元素；
-
标签必须闭合；
-
使用驼峰式命名法给属性命名。
b. 使用转化器将 HTML 和 SVG 标签转化为 JSX。
在 JSX 中通过大括号使用 JavaScript
a. 使用引号传递字符串。
b. 使用大括号传递用作 JSX 标签内的文本和用作紧跟在 = 符号后的属性。
c. 使用 “双大括号”传递 JSX 中的 CSS 和对象。
将 Props 传递给组件
a. 向组件传递 props。
-
将 props 传递给子组件：
export default function Profile() { return ( <Avatar person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} size={100} />); } -
在子组件中读取 props：
function Avatar({ person, size }) { // 在这里 person 和 size 是可访问的 }
b. 使用 JSX 展开语法传递 props：
function Profile(props) { return ( <div className="card"> <Avatar {...props} /> </div> );
}
c. 将 JSX 作为子组件传递：可以将带有 children prop 的组件看作有一个“洞”，可以由其父组件使用任意 JSX 来“填充”。
function Card({ children }) { return ( <div className="card"> {children} </div>);
}
export default function Profile() { return ( <Card> <Avatar size={100} person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} /> </Card>);
}
在学习这个部分的时候一直对组件间传递 children 的具体内容有所疑惑，后续结合官方文档中的多个具体代码样例和查阅相关资料，对这个概念有了深刻
