目录
1.在 state 中添加一个状态,作为表单元素的value值(控制表单元素值的来源)
2.给表单元素绑定 change 事件,将 表单元素的值 设置为 state 的值(控制表单元素值的变化)
1.调用 React.createRef() 方法创建一个 ref 对象
1. React 组件介绍
组件是
React
的
一等公
民
,使用
React
就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点:可复用、独立、可组合
2. React 组件的两种创建方式
2.1 使用函数创建组件
函数组件:使用
JS
的函数(或箭头函数)创建的组件
约
定1:
函数名称必须以
大写
字
母开头
约
定2:函数组
件
必须有返回
值
,表示
该
组件的
结
构
如果返回值为
null,
表示不渲染任何
内
容
function Hello() {
return (
<div>这是我的第一个函数组件!</div>
)
}
渲染函数组件
:
用函数名作为组
件
标签名
组件标签可以是单标签也可以是
双
标签
function Hello() {
return (
<div>这是我的第一个函数组件!</div>
)
}
ReactDOM.render(<Hello />, root)
使
用
JS
中的函数创建的组件叫做:
函
数组件
函数组件必须有返回值
组件名称必须以大写字母开头,
React
据此区
分
组
件
和
普通的React
元素
使用函数名作为组件标签名
function Hello() {
return (
<div>这是我的第一个函数组件!</div>
)
}
ReactDOM.render(<Hello />, root)
2.2 使用类创建组件
类组件:使用
ES6
的
class
创建的组件
约
定1:
类名称也必须以
大写
字
母开头
约
定2:
类组件应该继
承
React.Component
父类,从而可以使用父类中提供
的
方法或
属
性
约
定3:
类组件必须提
供
render()
方法
约
定4:render()
方法
必须有返回值
,表示该
组
件的结构
class Hello extends React.Component {
render() {
return <div>Hello Class Component!</div>
}
}
ReactDOM.render(<Hello />, root)
2.3 抽离为独立 JS 文件
组件作为一个独立的个体,一般
都
会
放到
一
个单独的
JS
文件中
1.
创
建Hello.js
2.
在
Hello.js
中导入
React
3.
创建组件(函
数
或
类)
4.
在
Hello.js
中导出该组件
<