重点内容：创建组件的方法，组件的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传过来的”
总结：
相比之下兄弟组件之间的传值更为难一些，但是它是在子传父，父传子的基础上，进行的传值，刚开始可能比较难以理解，你得先顺顺思路，然后多打几遍代码，就会慢慢熟练了。
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
