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