react 组件

一.props属性和state属性的用法和特点。

props属性只要给定值，就不能更改了。props属性的特点：

1.每个组件对象都有props属性

2.每个标签的所有属性都保存在props中

3.作用：通过标签属性从组件外 向组件内传递数据(props属性是一个只读属性。不能进行修改）

代码如下

//在函数中的props属性用法
    
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的方法

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'));

 

state 属性 可以修改，然后根据新的state属性重新渲染用户页面

还有个状态时setStart状态

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。

二 . 父子相传

     父组件向子组件传值：通过props将父组件的state传递给子组件，废话不多说上代码：

import React from 'react';
import ReactDOM from 'react-dom';
import User from './Son';//引入子组件

//定义数据
const person = {
    name: 'Tom',
    age:20
}

ReactDOM.render( //渲染子组件，并向子组件传递name,age属性
   
    <Son {...person}/>//这里的{...person}是展开运算符，也可以理解为name={person.name} age={person.age}
    , document.getElementById('root'));

 

以上是父组件中的代码。

下面上子组件的代码。先创建一个子组件Son.js

import React from 'react';

class Son extends React.Component{
    render(){
        return (
            <div>{this.props.name}，{this.props.age}</div>//这一步是使用props属性接收并使用父组件传来的name和age属性。
        );
    }
}

export default Son;//这一步是让子组件向外暴露自己然后父组件才能找到并给子组件传值

以上是父传子的过程，下面是子组件给父组件传值

index 入口文件 内容如下

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father'//这里是引入父组件father

ReactDOM.render(<Father></Father>,document.getElementById('root'));

　子组件Son.js代码如下

import React from 'react';
class Son extends React.Component{
    render(){
        console.log(this.props)//这一步是检测父组件传来的值
        return (
            <React.Fragment>
                <p>this is a son</p>//这一步是看他是否是子组件传的值
                {this.props.mess},{this.props.sonMess(1111)}  这一步是通过this.props.SonMess来给父组件传值的。
            </React.Fragment>
        )
    }
}
export default Son//这一步是向外暴露自己，方便被父组件找到

 

父组件 Father.js 文件代码示例：

import React from 'react';
import Son from './Son'//这一步是引入子组件Son

class Father extends React.Component{
    constructor(){
        super();//这一步是继承React.Component
        this.state ={
            mess:''//这里先创建一个空的mess属性
        }
    }
//下面这个函数是用来检测子组件是否把值传来了
    getSonMess(msg){
        console.log('这是子组件传过来的值：'+msg);
    }
    render(){
        return(
            <React.Fragment>
                <Son mess='hello son' sonMess={this.getSonMess.bind(this)}/>//这里是吧this.getSonMess这个函数用bind方法把当前Son这个标签和函数绑定在一起
            </React.Fragment>
        )
    }
}
export default  Father;//这一步是向外暴露自己

以上是子组件怎么给父组件传值

兄弟传值

怎么说呢，兄弟传值，就等于把father.js当作是媒介，就是Son1.js。先把要传的值传给father.js。然后再让father.js传给另一个儿子，就实现了兄弟相传，入口index文件是不需要更改的，father.js代码如下

import React from 'react';
import Son from './Son';
import Son2 from './Son2'; //先引入两个子文件

//父组件
class Father extends React.Component{

    constructor(){
        super();//继承React.Component
        this.state = {
            message:''创建一个空的对象message
        }
    }

  
    sonDatas(msg){  //用于接收Son.js组件的数据函数
        this.setState({
            message:msg//通过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;

子组件Son1的代码如下

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>//点击按钮，获取sonClick这个函数里面的值这里的第一个this指向这个button本身，后面那个this是通过bind方法来把函数里面的this和按钮本身绑定的
                    
            </React.Fragment>
        );
    }

}

export default Son;//向外暴露自己，方便father.js找到自己，然后传值

子组件Son2.js 代码如下

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;//向外暴露自己方便father找到自己

以上是我对react组件传值的理解，如有欠缺，请在下方评论出来