react组件渲染和父子组件之间的通信
1. 创建应用
npx create-react-app react-demo
cd react-demo
npm run start/yarn start
可能会遇到如下报错：
error @typescript-eslint/eslint-plugin@2.25.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "9.6.1"
error Found incompatible module.
执行以下命令之后，重新创建
yarn config set ignore-engines true
2. jsx 语法
1、返回标签形式的代码结构
2、标签里可以写表达式，但不可以是语句
3、特定属性
i 通过使用引号，来将属性值指定为字符串字面量
ii 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式。
4、JSX 表示对象：createElement
jsx
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// 注意：这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
3. 元素渲染
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
4. 组件props
- 自定义组件
- 自定义组件接收的属性，转换为单个对象props来获取
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
5. 编辑todoList demo演示state操作,父子组件传参
- todoList通过按钮实现增加删除和绑定
- 组件拆分,将todoList拆分成todoItem:父组件通过属性传 递参数给子组件，子组件通过props来接收
- 子组件向父组件传值:要调用父组件传递的方法
- 代码优化
6. css样式
className\style\fragment
