重点内容:创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值;
开头
其实组件感觉很绕,但是也就几个点,理清思路,学起来就比较容易,所以不要害怕哦,没有解决不了的难题
1.先看下下面的大纲吧
版权问题,不可侵犯
组件的理解:组件(Component)是对数据和方法的简单封装。 React 应用都是构建在组件之上,组件作为React的核心内容,是View的重要组成部分 。 在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件。 组件包含类组件和函数组件。
1.创建组件的方法
具体步骤如上,现在我们来操作一下
1.创建类组件
//创建类组件
import React from 'react';//引入React
//2.声明类,要继承React.Componet
class Person extends React.Component{
//3.重写渲染方法
render(){
return (
<div className = "small">//防止class与创建的类有冲突,所以在这用classname来代替class
<p>好好学习,天天向上</p>
</div>
)//注return后面的小括号,可以写,也可以不写
}
}
//4.向外暴露
export default Person;
2.创建函数组件
//函数组件
import React from "react";
import ReactDOM from "react-dom";
//声明函数
function User(){
return(<div>
我是一只猫,快乐的星猫,烦恼忘忘掉
</div>);
}
//向外暴露
export default User;
3.使用组件
引入组件
引入组件 import 组件名 from “./组件名”
<组件名/>
例子:
//创建类组件
//Person.js中
import React from 'react';//引入React
class Person extends React.Component{
render(){
return (
<div className = "small">
<p>好好学习,天天向上</p>
</div>
)
}
}
export default Person;
原本工程中生成的index.js中:
import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import Person from './Person';
import * as serviceWorker from '../serviceWorker';
ReactDOM.render(<Person></Person>, document.getElementById('root'));
serviceWorker.unregister();
注意:创建类组件时要用到render方法,但是创建函数组件不需要用到。
2.组件的props属性、state属性、ref属性的用法和特点
2.1props属性的特点:
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
5.对props中的属性值进行类型限制和必要性限制
6.只读,值不能被修改
作用:通过标签属性进行组件之间传值
注:先在组件上通过自定义属性赋值
使用函数组件代码块实例:
import React from 'react';
import ReactDOM from 'react-dom';
//使用函数组件
function User(props){
//在组件中获取props属性值
return <div>{props.name},{props.age}</div>
}
//定义数据
const person ={
name:'张三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
方法小结: 函数组件中,在函数上定义形参props, 在函数中 props.属性名
使用类组件代码块:
import React from 'react';
import ReactDOM from 'react-dom';
//使用class组件
class User extends React.Component{
render(){
return (
<div>{this.props.name}--{this.props.age}</div>
);
}
}
//数据
const person ={
name:'张三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
方法小结: 类组件中,通过this.props.属性名
2.state属性的特点
- state中的数据都是组件私有的;
- state中的数据,都是可读可写的;值可以被修改。
- 只在当前组件中起作用。
- 在构造方法中使用为,this.state={};
2.1state的使用实例:
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state属性是可修改的
this.state.name = 'jack';
return (
<h1>{this.state.name}</h1>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
3.ref属性的使用特点
3.1 react中ref的一些了解及认识
挂载到组件(有状态组件)上的ref,表示对组件实例的引用;
而挂载到dom元素上的ref,表示对具体的dom元素节点的引用。
一些场景需要获取某一个真实的DOM元素来交互,比如文本框的聚焦、触发强制动画等
3.2 哪些情况使用ref属性?
(1)可以在dom元素上面使用ref属性
(2)可以在class组件上面使用ref属性
(3)不准在函数组件上面使用ref属性,
原因:函数组件没有实例,父组件获取子组件的ref,其实是获取子组件的实例;但是可以在函数组件中 获取子组件实例的ref,并用一个变量存储起来,这个是没有问题的
3.3获取数据
实例:
<input type ="text" ref="a">'
通过this.refs.名字.value获取数值
注:this.refs只能用在普通的dom对象上,也就是HTML标签
组件refs获取不到
3. 父子组件传值
3.1父组件传值给子组件
父组件 --传值-- > 子组件
父组件向子组件传值,通过props,将父组件的state传递给了子组件。
F.js 调用了 S.js ,
S.js中的数据是由 F.js决定的
通过标签(组件)的属性传值
F.js 引入 S.js
class F{
<S 属性=值></S>
}
S.js {this.props.属性}
注:F.js代表父组件,S.js代表是子组件。
代码块实例:
父组件代码片段:
1 import React from 'react';
2 import Son from './Son';
3 class Father extends React.Component{
4 constructor(){
5 super();
6
7 }
8 render(){
9 return(
10 <React.Fragment>
11 {/* 我们在这里引入子组件 并声明一个属性str 给他传一个hello */}
12 <Son str='hello world'></Son>
13 </React.Fragment>
14 )
15 }
16
17 }
18 export default Father;
子组件代码:
1 import React from 'react';
2 class Son extends React.Component{
3 constructor(){
4 super()
5 }
6
7 render(){
8 return(
9 <React.Fragment>
10 {/* 子组件通过props 这个属性来接受父组件传过来的str */}
11 {this.props.str}
12 </React.Fragment>
13 )
14 }
15
16 }
17 export default Son;
页面效果:得到"hello world"这个值
3.2子组件传值给父组件
父组件 <–传值-- 子组件
子组件通过调用父组件传递到子组件的方法向父组件传递消息的。
F.js 调用了 S.js , F.js 中需要动态显示 S.js 的一些数据,
F.js 引入 S.js
class F {
m(msg){ 接收子组件的参数 }
<S 属性=this.m函数></S>
}
S.js {this.props.函数(11111)}
父组件代码:
1 import React from 'react';
2 import Son from './Son';
3 class Father extends React.Component{
4 constructor(){
5 super();
6
7 }
8 // 1、在这里中声明一个函数,用于接收子组件的传值
9 message(msg){
10 // 通过形参接受到子组件的值并打印到控制台
11 console.log(msg)
12 }
13 render(){
14 return(
15 <React.Fragment>
16 {/* 在这里声明一个msg属性,通过组件属性的方法,把函数传递给子组件 */}
17 <Son msg={this.message}></Son>
18 </React.Fragment>
19 )
20 }
21
22 }
23 export default Father;
子组件代码:
1 import React from 'react';
2 class Son extends React.Component{
3 constructor(){
4 super()
5 }
6 render(){
7 return(
8 <React.Fragment>
9 {/* 在子组件中通过props属性调用父组件的函数,并通过参数传值 */}
10 {this.props.msg('hello Word')}
11 </React.Fragment>
12 )
13 }
14
15 }
16 export default Son;
在页面显示:hello word
4. 兄弟组件传值
兄弟组件之间的传值,是通过父组件做的中转 ,流程为:
组件A – 传值 --> 父组件 – 传值 --> 组件B
1.首先打出父组件和两个子组件的框架
2.在在父组件中引入两个子组件,
具体代码如下:
父组件:
import React from 'react';
import Son from './Son';
import Son1 from './Son1 ';
class Father extends React.Component{
constructor(){
super()
this.state={
message:''// 先给message一个空值
}
}
message(msg){ // 声明一个方法用来接收Son传来的值
this.setState({
message:msg
})//把Son传来的值给message
console.log(msg)
}
render(){
return(
<React.Fragment>//把两个子组件在这里引用
// 把子组件的值传给父组件
<Son str={this.message.bind(this)}></Son>
//这里引入第二个子组件 并声明一个属性mess , 把Son1传来的值传过去
<Son1 mess={this.state.message}></Son1 >
</React.Fragment>
)
}
}
export default Father;
一个子组件:
import React from 'react';
class Son extends React.Component{
constructor(){
super()
}
// 在这传给父组件一个值
btn(){
this.props.str("这是Son传的")
}
render(){
return(
<React.Fragment>
// 写一个点击按钮 来调用上边的值
<button onClick={this.btn.bind(this)}>这是Son </button>
</React.Fragment>
)
}
}
export default Son ;
另一个子组件:
import React from 'react';
class Son1 extends React.Component{
constructor(){
super()
}
render(){
return(
<React.Fragment>
// 第二个子组件通过props 这个属性来接受父组件传过来的str
<div>这是Son传过来的:{this.props.mess}</div>
</React.Fragment>
)
}
}
export default Son1 ;
效果为点下按钮:就会出现“这是Son传过来的”
总结:
相比之下兄弟组件之间的传值更为难一些,但是它是在子传父,父传子的基础上,进行的传值,刚开始可能比较难以理解,你得先顺顺思路,然后多打几遍代码,就会慢慢熟练了。