React之组件-CSDN博客

本文链接：https://blog.csdn.net/qq_40588441/article/details/139928461

React之组件

工厂函数组件（简单组件）

函数式调用

单个参数

import React from "react";
import ReactDom from "react-dom";

import App from "./App.js"

function App(props){ // 函数组件
   return <div>首页{props.content}{props.age}</div>
}

ReactDom.render(App('你好'),document.getElementById("root")); // 单个参数

多个参数

import React from "react";
import ReactDom from "react-dom";

import App from "./App.js"

function App(props){ // 函数组件
   return <div>首页{props.content}{props.age}</div>
}


ReactDom.render(App({content:"你好啊"}),document.getElementById("root")); // 多个参数 函数调用

组件标签式调用

单个参数

import React from "react";
import ReactDom from "react-dom";

import App from "./App.js"

function App(props){ // 函数组件
   return <div>首页{props.content}{props.age}</div>
}

ReactDom.render(<App></App>,document.getElementById("root")); // 组件式调用

单个参数

import React from "react";
import ReactDom from "react-dom";

import App from "./App.js"

function App(props){ // 函数组件
   return <div>首页{props.content}{props.age}</div>
}

ReactDom.render(<App content="你好" age="18"></App>,document.getElementById("root")); // 多个参数 组件式调用

组件三大属性

state

state是组件对象最重要的属性, 值是对象(可以包含多个数据)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

编码操作

初始化状态

 constructor (props) {
  super(props)
  this.state = {
   stateProp1 : value1,
   stateProp2 : value2
  }
 }

读取某个状态值
```
this.state.statePropertyName
```

更新状态---->组件界面更新

 this.setState({
  stateProp1 : value1,
  stateProp2 : value2
 })

注意：内部数据用state

props

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

编码操作

内部读取某个属性值

this.props.propertyName

对props中的属性值进行类型限制和必要性限制

Person.propTypes = {

name: React.PropTypes.string.isRequired,

age: React.PropTypes.number.isRequired

}

扩展属性: 将对象的所有属性通过props传递
```
<Person {...person}/>
```
默认属性值
```
Person.defaultProps = {
name: 'Mary'
}
```

组件类的构造函数

constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

refs和事件处理

refs属性

组件内的标签都可以定义ref属性来标识自己
<input type=“text” ref={input => this.msgInput = input}/>
回调函数在组件初始化渲染完或卸载时自动调用
在组件中可以通过this.msgInput来得到对应的真实DOM元素
作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

用法

事件处理

通过onXxx属性指定组件的事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

通过event.target得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //**返回**input**对象*
}

注意

组件内置的方法中的this为组件对象
在组件类中自定义的方法中this为null
- 强制绑定this: 通过函数对象的bind()
- 箭头函数(ES6模块化编码时才能使用)

事件

使用箭头函数

bind两种写法

点击事件

import React, { Component } from "react";
import Home from "./views/Home.js";
import About from "./views/About.js";

// 属性和行为（方法）
class App extends Component {
	constructor(props) {
		super(props);
		// 数据放在state中
		this.state = {
			com: <Home> </Home>,
		};
	}

	render() {
		return (
			<div>
				<button
					onClick={() => {
						// alert("首页");
						this.setState({
							com: <Home> </Home>,
						});
					}}
				>
					首页{" "}
				</button>
				<button
					onClick={() => {
						// alert("关于")
						this.setState({
							com: <About> </About>,
						});
					}}
				>
					关于{" "}
				</button>{" "}
				{this.state.com}{" "}
			</div>
		);
	}
}

export default App;