关于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,心愿对你有所帮忙,让咱们一起致力走向巅峰!