React父组件向子组件传值

父组件:

	import React from "react"
	import ComentList from "./ComentList"
	 
	class Parent extends React.Component {
	    constructor(props) {
	        super(props);
	        this.state = {name: 'Hhhhh’}
	    }
	    render() {
	        return (
	            <div>
	                <Child name={this.state.name}> 
	                </Child>
	            </div>
	 
	        )
	    }
}
export default Parent;

子组件

import React from "react"
class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: props.name}
    }
  	componentWillReceiveProps (nextProps) {
        // 在接受父组件改变后的props需要重新渲染组件时用到的比较多
        // 接受一个参数nextProps
        // 通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件
	   console.log(nextProps) 
	   this.setState({name: nextProps.name})
	}
    render() {
        return (
            <div className="child">
            	我是子组件
            </div>
        )
    }
}
export default Child;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

H___want

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值