关于react.js:react使用props和总结

react 应用 props 和总结

1. 开发环境 react
2. 电脑系统 windows10 专业版
3. 在应用 react 开发的过程中, 咱们常常会应用到 props 进行组件传值, 上面我来分享一下, 心愿对你有所帮忙!
4. 在父组件增加如下代码:

import React from "react";
import axios from 'axios'
import ChenConf from '@/Components/Chenon'
export default class Home extends React.Component {constructor(props) {super(props);
        this.state = {
            xiaoxi: "会太累",
            chneresObj: undefined,
            resObj:null,
            chendah:{
                name:'张无忌',
                age:'22'
            }
        }

        this.chenchange = this.chenchange.bind(this);
    }

    render() {
        const ChenHome =
            <div>
                <p> 我是 home </p>
                <p> 我要坏加 </p>
                <a href="#/about" > 去 about </a>
                <button onClick={this.chenchange}> 变动 </button>
                <ChenConf name={this.state.chendah} />
            </div>
        // 完结啦
        return (ChenHome)
            ;
    }

    chenchange(){
        
        this.setState({chendah:{
            name:"赵敏",
            age:'11'
        }})
        console.log(this.state.chendah.name);
        
    }

    componentWillMount() {}

}

4-1. 效果图如下:

4-2. 子组件 props 输入如下:

4-3. 点击批改只会, 效果图如下:

4-4. 子组件 props 输入如下:

 在子组件中咱们获取到了 父组件 通过 props 传过来的最新的数据 

5. 在子组件增加如下代码:

import React from 'react';
export default class ChenConf extends React.Component {constructor(props) {super(props);
        // console.log(this.props.name);
        this.state={}}

    componentWillMount(){}

    componentDidMount(){// 一辈子只会执行一次}

    componentWillReceiveProps(nextProps){console.log(nextProps);// 输入的是 props 传过来的最新的数据
    }

    render() {
        const ChenCon1=
        <div>
            <p> 我是子组件一 </p>
            {/* <p>{this.props.name}</p> */}
            <p>{this.props.name.name}</p>
            <p>{this.props.name.age}</p>

        </div>
        return (ChenCon1)
        ;
    }
}

6. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!