创建React组件之属性及组件传值

React入门必备基本知识

一、创建类式组件

import React, { Component } from 'react' //引入 React
export default class extends React.Component{ //继承 React 的 Component
	constructor(props){ //构造器
		//在class方法中，继承是使用 extends 关键字来实现的。子类必须在 constructor( )调用 super( )方法，否则新建实例时会报错。
		super();
	}
	this.state={ 
		键:'值'
	}
	//渲染方法 render
	render(){
		return(
			<标签></标签>
		)
	}
}

通过以上的代码我们就可以创建类式组件了

二、props属性

props 的主要功能在组件之间通信进行接受和传递，根据组件功能来使用或显示。父组件使用属性向子组件传值，子组件通过 this.props 接受。 简单来说，就是通过 props 传递值，然后去使用它。但是这个值不能被修改。传递的类型可以是 object、Array、function、String等。

三、state状态

state 顾名思义就是状态，状态指的是事物所处的状况，所以我们也可以把组件看成是一个状态机，通过与用户的交互，使用 state 来完成对行为的控制、数据的更新、界面的渲染实现不同的状态，让用户界面和数据保持一致。

我们可以通过一张图大概了解属性与状态的区别

四、父传子

父传子相对来说比较简单，只需通过一个属性并把参数传入子组件就可以收到，看一个例子：

//父组件  Parent
import React, { Component } from 'react'
import Child from './Child' //引入子组件
export default class Parent extends React.Component{ //继承React并导出组件
    render () { //渲染函数
        return (
        		//这里通过属性向子组件传相应的值
               <Child item={'hello world'}/>
        )
    }
}

//子组件 Child
import React, { Component } from 'react'
export default class Child extends Component { //继承React并导出组件
    constructor(props){ //这里用来接收外部传入的值
        super();
    }
    render() {
    	console.log(this.props.item) // hello world
        return (
            <div>
                {
                	//因为父组件定义属性名 item 传入的值，所以我们需要在此输入 item
                    this.props.item
                }
            </div>
        )
    }
}

五、子传父

子传父与父传子亦有相同之处，还是存在些差异。我们知道子组件不能通过 props 向父组件传值，但可以利用回调函数进行组件通信传值。看例子：

import React, { Component } from 'react'
import Child from './Child' //引入子组件
export default class Parent extends React.Component{ //继承React并导出组件
	//自定义回调函数
    callBack(value){
        console.log(value)
    }
    render () {
        return (
        		//通过属性向子组件传入自定义函数
               <Child item={this.callBack}/>
        )
    }
}

//子组件 Child
import React, { Component } from 'react'
export default class Child extends Component { //继承React并导出组件
    constructor(props){
        super();
    }
    render() {
        return (
            <div>
                {
                	//通过父组件传入的函数在此调用并传入值，即可完成子传父
                    this.props.item('hello world')
                }
            </div>
        )
    }
}

如何理解以上的回调函数？理解一句话：函数的调用会回到定义它的地方。

六、兄弟传值

兄弟传值就是把子传父、父传子联合一起用即可。看例子：

//子组件 '1'
import React, { Component } from 'react'
export default class Component_1 extends Component {
    Fun(e){
        this.props.item(e.target.value)
    }
    render(){
        return (
            <div>
                <input type="text" onChange={this.Fun.bind(this)}/>
            </div>
        )
    }
}

//父组件
import React, { Component } from 'react'
import Component_1 from './Component_1'//引入子组件 '1'
import Component_2 from './Component_2'//引入子组件 '2'
export default class Parent extends React.Component{
    constructor(props){
        super();
        this.state={
            initialValue:'' //定义初始值为空
        }
    }
    //自定义回调函数
    componentValueCallBack=(value)=>{
    	//当子组件1调用并传值回来在这里使用 setState 重新设置值
        this.setState({
            initialValue:value
        })
    }
    render () {
        return (
               <div>
                    <Component_1 item={this.componentValueCallBack}/>
                    //注意:在创建阶段初始值也会传入子组件'2'
                    <Component_2 data={this.state.initialValue}/>
               </div>
        )
    }
}

//子组件 '2'
import React, { Component } from 'react'
export default class Component_2 extends Component {
    render() {
        return (
            <div>
                {
                	//在这里我们直接打印在控制台看输出结果就可以了
                    console.log(this.props.data) 
                }
            </div>
        )
    }
}

兄弟传值大概思路，当用户在子组件1 input框内输入任意内容，onChang 事件监听到调用 Fun 函数，当前函数内有父组件传入的回调函数，我们再此调用该函数并传入参数。这里补充一句：函数的定义回到定义它的地方。父组件在创建阶段时使用 state 定义 initialValue 初始值为空。当子组件1有值输入就会到父组件的 componentValueCallBack 函数中，我们在该函数内使用 setState 重新设置 initialValue 值，state 发生改变会触发 render 函数并重新渲染页面，被修改过后的值则继传入到子组件2中，组件2通过 this.props.data 渲染页面。

总结：
本篇介绍了一些基本属性，组件通信及使用方法，也许不够细节。因为本人还处于学习状态，有什么问题多多指出，共同学习！