React组件介绍

1.创建组件的方法

React组件分为两种：
（1）函数组件

• 引入React模块
• 声明函数function 组件名（）{}
• 向外暴露 export default 组件名

import React from 'react'
function (){
<React.Fragment>

</React.Fragment>
   
}
export default Fun

（2）class组件

• 引入React模块
• 声明类 class 组件名 extends React.Component{render(){}}
• 向外暴露 export default 组件名

import React from 'react'
class (){
render(){
return(
<React.Fragment>

</React.Fragment>   
)
}

}
export default fun

2.props属性

props属性:

• 值从外界传过来
• 值不能修改
• 一般在子组件中使用
• this.props.属性名

3.state属性

state属性:

• 是组件私有的
• 值可以修改
• 只能在当前组件使用
• 在构造方法中，this.state={}

4.父组件向子组件传值

原理：利用组件props属性
Father组件代码：

//引入react模块
import React from 'react';
import React from './Son'
class Father extends React.Component{
    
    render (){
        return(
            <React.Fragment>
                <Son  act='hello son'></Son>
            </React.Fragment>
        )
    }
}
export default Father;

Son组件代码：

//引入react模块
import React from 'react';

class Son extends React.Component{
    
    render (){
        return(
            <React.Fragment>
              {this.props.act}
            </React.Fragment>
        )
    }
}
export default Father;

5.子组件向父组件传值

原理：

1. 在父组件中声明一个函数，用于接收子组件的传值
2. 通过组件属性的方法，把函数传递给子组件
3. 在子组件中通过props属性调用父组件的函数，并通过参数传值
4. 在父组件中的函数通过形参接收子组件的传值

Father组件代码：

//引入react模块
import React from 'react';
import React from './Son'
class Father extends React.Component{
//声明一个函数，接收子组件传过来的值
getSon（v）{
document.write('子组件传过来的值：'+v)
}
    
    render (){
        return(
            <React.Fragment>
                <Son active={this.getSon}></Son>
            </React.Fragment>
        )
    }
}
export default Father;

Son组件代码：

//引入react模块
import React from 'react';

class Son extends React.Component{
    
    render (){
        return(
            <React.Fragment>
            //'将hello father'传给Father.js
              {this.active('hello father')}
            </React.Fragment>
        )
    }
}
export default Father;

6.兄弟组件传值

原理：将父组件作为桥梁
流程：组件Son ----传值----> Father ----传值---->Son2

Father.js：

//引入react模块
import React from 'react';
//引入Son组件
import Son from './Son';
//引入Son2组件
import Son2 from './Son2';

//父组件
class Father extends React.Component{
 
    //构造函数声明state属性
    constructor(){
        super();
        this.state = {
            msg:''
        }
    }

    //用于接收Son.js组件的数据函数 获取子组件传过来的值
    sondata(msg){
        this.setState({
            message:msg
        });
    }

    render(){
        return (
            <React.Fragment>
               
               <h1>在Father组件中显示：</h1>
               <Son sons={this.sondata.bind(this)}></Son>
               <Son2 mess={this.state.message}></Son2>
            </React.Fragment>
        );
    }

}

export default Father;

Father.js概括：
1.引入Son.js和Son2.js组件
2.接收由Son.js传递过来的数据
3.将Son.js传过来的值传给Son2.js并渲染到页面

Son.js:

import React from 'react';

//子组件
class Son extends React.Component{

    //按钮点击事件函数向父组件中传值
    sonClick(){
        this.props.sons('我是Son');
    }

    render(){
        return (
            <React.Fragment>
            
                <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
                    
            </React.Fragment>
        );
    }

}

export default Son;

Son.js概括
1.首先生成一个按钮并绑定一个点击事件
2.向父组件进行传值

Son2.js:

import React from 'react';
class Son2 extends React.Component{
    render(){
        return(
            <React.Fragment>
               
             {this.props.mess}
            </React.Fragment>
        )
    }
}
export default Son2;

Son2.js概括：
通过标签属性props获取到由son.js传递到Father.js的值
.