跳转至

Components

创建项目

创建项目box-app

1
2
3
create-react-app box-app
cd box-app
npm start

安装bootstrap库

1
npm i bootstrap

bootstrap的引入方式

import 'bootstrap/dist/css/bootstrap.css'

创建按钮

当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。

内嵌表达式

JSX中使用{}嵌入表达式。

设置属性

  • class -> className
  • CSS属性：background-color -> backgroundColor，其它属性类似

渲染列表

  • 使用map函数
  • 每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。

Conditional Rendering

利用逻辑表达式的短路原则。

  • 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
  • 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

绑定事件

  • 注意妥善处理好绑定事件函数的this

修改state

  • 需要使用this.setState()函数
  • 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。