React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

　　创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

1、react组件

1.1、创建组件的方法

　　1.1.1、函数组件

　　定义一个组件最简单的方式是使用JavaScript函数

function fn(props){
    return <h1>Hello,{props.name}</h1>;
}

该函数是一个React组件，它接收一个单一的 " props " 对象并返回了一个React 元素。我们之所以称这种类型的组件为函数组件

　　1.1.2、类组件

//引入react模块
import React from 'react';
//声明子组件son
class R extends React.Component {//重写方法render
    render() {
        return (
            // 模板字串
            <React.Fragment>
                {/* jsx */}
　　　　　　　　　　<h1>hello,{props.name}</h1>　
            </React.Fragment>
        );
    }
}

1.2组件的props属性

　　先在组件上通过自定义属性赋值

　　函数组件中，在函数上定义形参props，在函数中 props.属性名

function name(props) {
    console.log(props)//输出‘Tom’
}

　　类组件中，通过 this.props.属性名

class Rea extends React.Component {
    render() {
        return (
            <React.Fragment>
                {console.log(this.props.name)}
                {/* 输出’Tom‘ */}
            </React.Fragment>
        );
    }
}

作用：在组件之间进行传值

特点：无论是使用函数或是类来声明一个组件，它不能修改它自己的props值。是只可读不可写

1.3组件的state属性

　　state的使用

//引入react模块
import React from 'react'
class Act extends React.Component {
    constructor(){
        super()
        this.state={
            name:'lxr'
        }
    }
    render() {
        return (
            <React.Fragment>
                {console.log(this.state.name)}
                {/* 这里输出name值为’lxr‘ */}
            </React.Fragment>
        );
    }
}

　　通过修改状态来更改name值

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

class Act extends React.Component {
    constructor(){
        super()
        this.state={
            name:'lxr'
        }
    }
    update(){
        //重新设置name值
        this.setState({
            name:'rlh'
        })
    }
    render() {
        return (
            <React.Fragment>
                {/* 这里绑定事件 */}
               <button onClick={this.update.bind(this)} >点击</button>
                {console.log(this.state.name)}
            </React.Fragment>
        );
    }
}

　　state是组件内独有的，外部无法向内部传递state，也无法直接改变state的值

而改变state是使用React组件基类中的一个自带函数：

this.setState({
  ...
});

　　使用这个函数之前一定要注意this的作用域，箭头函数中的this指向外部this，而普通函数中的this指向函数本身

2、react传值

2.1、父传子

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

//声明父组件father
class Father extends React.Component {
    //父类方法render
    render() {
        return (
            <React.Fragment>
                {/* 使用子模块Son 并把mess传给子组件，方法名为mess */}
                <Son mess='父组件传来的' />
            </React.Fragment>
        );
    }
}

export default Father;

//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component {
    
    //子类方法render
    render() {
        return (
            <React.Fragment>
                {/* 用构造方法里的props来调父组件传来的mess */}
                {console.log(this.props.mess)}
            </React.Fragment>
        );
    }
}
//向外暴露
export default Son

　　子组件输出父组件传来的值

2.2、子传父

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

//声明父组件father
class Father extends React.Component {
    //父组件的father方法
    father(msg){
        console.log(msg)
    }

    //父类方法render
    render() {
        return (
            <React.Fragment>
                {/* 使用子模块Son 把父组件的father方法传给子组件*/}
                <Son father= {this.father.bind(this)} />
            </React.Fragment>
        );
    }
}
//向外暴露
export default Father;

//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component {
    
    //子类方法render
    render() {
        return (
            <React.Fragment>
                {/* 调用父组件传来的father方法 */}
                {this.props.father('来自子组件传来的数据')}
            </React.Fragment>
        );
    }
}
//向外暴露
export default Son

父组件输出子组件传来的值

2.3、兄弟相传

父组件

//引入react模块
import React from 'react';
//引入Son模块
import Son from './Son';
//引入Son0模块
import Son0 from './Son0';

//声明父组件father
class Father extends React.Component {
    constructor(){
        super()
        //给state定义mess为空值
        this.state={
            mess:''
        }
    }
    //父组件的father方法
    father(msg){
        //控制台输出子组件传来的数据
        // console.log(msg)//输出：来自son的数据
        //给状态里的mess设置值
        this.setState({
            mess:msg
        })
    }

    //父类方法render
    render() {
        return (
            <React.Fragment>
                {/* 使用子模块Son 把父组件的father方法传给子组件*/}
                <Son father= {this.father.bind(this)} />
                {/* 把子组件son传来的值再传给子组件son0 */}
                <Son0 mess={this.state.mess} />
            </React.Fragment>
        );
    }
}
//向外暴露
export default Father;

子组件1

//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component {
    //子组件的son方法
    son(){
        //使用father传来的方法，并返回数据
        this.props.father('来自son的数据')
    }
    //子类方法render
    render() {
        return (
            <React.Fragment>
                {/* 绑定click时间点击的时候调用son方法 */}
                <button onClick={this.son.bind(this)}>来自子组件的按钮</button>
            </React.Fragment>
        );
    }
}
//向外暴露
export default Son

子组件2

//引入react模块
import React from 'react';
//声明子组件son0
class Son0 extends React.Component {
    //子类方法render
    render() {
        return (
            <React.Fragment>
                {console.log(`我是Son0 这是：${this.props.mess}`)}
            </React.Fragment>
        );
    }
}

export default Son0;

当我点击button按钮的时候

son0.js输出来自son.js的数据

posted @ 2019-12-20 11:53 林小冉阅读(686) 评论(1) 编辑收藏举报

刷新页面返回顶部