介绍React 组件 父子传值兄弟传值及 props和state属性的特点
重点难点：
1.父子传值
2.兄弟传值
3.state属性介绍
4.props属性介绍
5.refs属性介绍
一. 创建组件的方法
组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
创建组建的方法有两种 ：第一种是函数组件 第二种是类组件 下面给大家详细介绍一下
1.1 函数组件方法
1.引用react模块
2.声明函数
3.向外暴露
代码示例如下：
// 创建一个函数组件
// 首先引用react模块
import React from 'react';
// 声明函数
function User(props){
return(
<div><font>hello user</font>
<p>
{props.str}</p>
</div>
)
}
//向外暴露
export default User;
1.2 类组件方法
1.引用react模块
2.声明类
3.重写渲染方法
4 向外暴露
代码示例如下：
// 类组件
// 先引入模块
import React from 'react';
import User from './User';
// 声明类
class Person extends React.Component{
// 重写渲染方法
render(){
return(
<div className='div'>
<div>hello person</div>
<User str='1'></User>
</div>
);
};
};
// 向外暴露
export default Person;
二. 组件props属性介绍
1.先在组件上通过自定义属性赋值
2.函数组件中，在函数上定义形参props，在函数中 props.属性名
3.类组件中，通过 this.props.属性名
4.作用：组件之间传值
5.特点：只读，值不能被修改
代码示例如下：
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
render() {
return <h1>{this.props.site}
- {this.props.sologen} - {this.props.url}</h1>
}
}
ReactDOM.render(
<Me site="编程" sologen="我的故事 " url="https://www.mi360.cn" />,
document.getElementById('root')
);
三. 组件state属性介绍
1 .state的初始化必须在构造函数中
2. state的更改必须通过setState函数，这个函数可以直接接受一个state对象，也可以接受一>个函数，函数有个参数，是props，就是如果我们要用到上一个>state>或者props，我们就需要传入一个函数。
当state是一个比较复杂的对象的时候，就比如里面还有多个对象的引用，那么我们可能只需>要单独的更新某个对象的值，那么我们用setState的时候是只用传这个对象的值呢，还是要>传入state中所有的值呢，答案是只需要传入改变的那个值，因为setState是对state对象做一个合并的操作，并不是替换。
代码示例如下：
import React from 'react';
import Son from './Son';
import Son2 from './Son2';
//父组件
class Father extends React.Component{
constructor(){
super();
this.state = {
message:''
}
}
//用于接收Son.js组件的数据函数
sonDatas(msg){
this.setState({
message:msg
});
console.log("在Father.js中展示Son.js生成的数据："+msg);
}
render(){
return (
<React.Fragment>
<h1>在Father组件中显示：</h1>
<Son sondata={this.sonDatas.bind(this)}></Son>
<Son2 mess={this.state.message}></Son2>
</React.Fragment>
);
}
}
export default Father;
四. 父子传值
4.1 父传子
父组件 --> 子组件 props属性
F.js 调用了 S.js , S.js中的数据是由 F.js决定的 通过标签（组件）的属性传值
F.js 引入 S.js
class F{
<S 属性=值>
}
S.js {this.props.属性}
父组件代码示例如下：
//父组件里面写的函数
// 类组件
// 先引入模块
import React from 'react';
import User from './User';
// 声明类
class Person extends React.Component{
// 重写渲染方法
render(){
return(
<div className='div'>
<div>hello person</div>
<User str='1'></User>
</div>
);
};
};
// 向外暴露
export default Person;
子组件代码示例如下：
// 创建一个函数组件
// 首先引用react模块
import React from 'react';
// 声明函数
function User(props){
return(
<div><font>hello user</font>
<p>
{props.str}</p>
</div>
)
}
export default User;
4.2 子传父
子组件 --> 父组件
1、在父组件中声明一个函数，用于接收子组件的传值
2、通过组件属性的方法，把函数传递给子组件
3、在子组件中通过props属性调用父组件的函数，并通过参数传值
4、在父组件中的函数通过形参接收子组件的传值
父组件代码示例如下：
// 引用模块
import React from 'react';
import Son from './Son';
// 类函数
class Father extends React.Component{
// 写一个构造方法
message(msg){
console.log(msg)
}
// 重写渲染方法
render(){
return(
<React.Fragment>
<Son mess='hello ' msg={this.message}></Son>
</React.Fragment>
)
}
}
export default Father;
子组件代码示例如下：
import React from 'react';
class Son extends React.Component{
// 重新渲染页面
render(){
//返回值
return(
<React.Fragment>
<p>
{this.props.mess} ,
//传给父组件的值
{this.props.msg(123)}
</p>
</React.Fragment>
)
};
}
// 向外暴露
export default Son;
五. 兄弟传值
1、在父组件中声明一个函数，用于接收子组件的传值
2、通过组件属性的方法，把函数传递给子组件
3、在子组件中通过props属性调用父组件的函数，并通过参数传值
4、在父组件中的函数通过形参接收子组件的传值
5. 父组件再传给另一个儿子 通过构造方法 this.state接收 再用父传子的方法就可以了
父组件代码示例如下：
import React from 'react';
import Son from './Son';
import Son2 from './Son2';
//父组件
class Father extends React.Component{
constructor(){
super();
this.state = {
message:''
}
}
//用于接收Son.js组件的数据函数
sonDatas(msg){
this.setState({
message:msg
});
console.log("在Father.js中展示Son.js生成的数据："+msg);
}
render(){
return (
<React.Fragment>
<h1>在Father组件中显示：</h1>
<Son sondata={this.sonDatas.bind(this)}></Son>
<Son2 mess={this.state.message}></Son2>
</React.Fragment>
);
}
}
export default Father;
子组件1代码示例如下：
import React from 'react';
//子组件
class Son extends React.Component{
//按钮点击事件函数
sonClick(){
this.props.sondata('这是从Son.js中生成的数据。。。');
}
render(){
return (
<React.Fragment>
<button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
</React.Fragment>
);
}
}
export default Son;
子组件2代码示例如下：
import React from 'react';
//子组件
class Son2 extends React.Component{
render(){
return (
<React.Fragment>
<h1>
在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
{this.props.mess}
</h1>
</React.Fragment>
);
}
}
export default Son2;
六. refs属性介绍
在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等
- 给DOM元素添加ref属性
- 给类组件添加ref属性
子组件2代码示例如下：
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
//点击事件
handleClick(){
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render(){
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}/>
</div>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
注意
一定要弄明白他们之间传值的原理，如何传值。小编刚开始也是很蒙的，以上都是来自小编的个人理解，欢迎大家随时补充呀 ~
