react父子组件间的交流

前言

本博客主要讲述,react中父组件和子组件之间的交流,其中包括父组件和子组件的值的交流和函数方法的交流,即父组件如何如何传值给子组件,父组件将方法传给子组件,父组件如何调用子组件的方法。
本博客主要总结性的讲述了再react中组件的交流方式,举出具体代码的可参考【React组件之间传值】。

统一说明:<ChildrenComponents /> 代表引入的子组件

(一)父组件通过state传值给子组件,子组件通过props获取父组件的传递值

//(一)传值,即在父组件中声明好自己的state,然后传值,如下
//1.初始值
constructor() {
    super();
    this.state = {
      stateValue:true
    }
  }
//2.如有改变设定值
this.setState({ stateValue: false })
//3.在父组件中传值
<ChildrenComponents stateValue={this.state.stateValue} stateValue2="react value" />

//(二)取值,即在需要的地方取到通过props取父组件传过来的值
//如在componentDidMount中取值
componentDidMount() {
	const huoquValue = this.props.stateValue;
	if ( !this.props.stateValue ) {
		//通过props来接收传递过来的变量
		console.log('stateValue', this.props.stateValue, this.props.stateValue2)
	}
}

值得注意一点的是,setState 是一个异步方法,需要render值行的时候才会触发。可以参考我的博客【 React的setState立即执行方案】。


(二)父组件将function函数方法传给子组件,子组件通过props来获取。

//父组件文件中:
class TestHtml extends React.Component {
	//1.函数方法的声明
	propsFunction() { console.log('声明在父组件的方法') }
	
	render() {
		return (
		<div>
			<span><span>
			//2.传递
			<ChildrenComponents propsFunction={::this.propsFunction} />
		</div>
		)
	}
}
function mapStateToProps(state, ownProps) {
 	return {
	}
}

function mapDispatchToProps(dispatch) {
	return {
		...bindActionCreators(action, dispatch)
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(TestHtml)



子组件中获取
//也直接通过 props 来获取传递过来的函数
<Button onClick={this.props.propsFunction} />

说明:写这一段的时候,突发奇想,竟然就把react-redux的页面结构的写出来了。好吧,等下写完这篇,如果有必要就具体写一下这个页面的结构类型吧。


(三)在父组件中调用子组件中的function函数方法。

//注:新的react不能通过是给子组件一个ref,然后父组件通过refs获取到子组件接口的!

// 父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
                {/* 1.通过onRef接收子组件的函数 */}
                <ChildrenComponents onRef={::this.onRef} />
                <button onClick={::this.click} >click</button>
            </div>
        )
    }

    onRef(ref) {
        // 2. 把子组件中的函数赋值到 child 变量中
        this.child = ref
    }
    click() { //调用子组件函数
        // 4.通过 child 变量调用需要的函数
        this.child.myChild()
    }

}
 //子组件
class ChildrenComponents extends Component {
    componentDidMount(){
        // 3. 将子组件中的所有函数变量传递到父组件的onRef函数中,此处必须声明
        this.props.onRef(this)
    }
    myChild() { alert('This is child Action') }

    render() {
        return ('Child Render Text')
    }
}


(四)特殊情况

当你发现这些方法都不起作用的时候,或者说,因为某些限制而不能用的时候,你就换一下思路了。
其实我们还可以通过action–reduce的方式在他们的外部且是公共的action-reduce中搞定。
其中涉及到方法我们就直接新建一个方法,在action中声明,在reduce中实现。如果只是某个值,用不到函数的,我们可以直接在reduce里面设定,且赋值,最后通过mapStateToProps获取。
关于mapStateToProps,可以直接参考【React依赖注入说明(mapStateToProps/mapDispatchToProps)


总结

1.父组件通过state向子组件传值,子组件通过props获取父组件所传的值。
2.子组件通过props获取父组件中定义的函数方法,但是需要在父组件调用子组件的标签中写明。
3.父组件调用子组件中函数需要定义一个function函数来转接,而不能通过ref/refs的方式
4.组件之间的交流也不一定要沉在这些直接性的关联的东西,我们的思维还可以提升一个高度,可以考虑通过action-reduce来搞定。
end~
欢迎指正。
~

~
有不明白的也可以留言,联系方式在个人资料处。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
React中,父组件向子组件传值可以通过props来实现。父组件可以将需要传递的数据作为属性传递给子组件,子组件通过props来接收这些数据。下面是几种常见的父子组件传值的方式: 1. 父组件通过props传递数据给子组件: 父组件定义一个属性,并将需要传递的数据作为该属性的值,然后将子组件引入到父组件中,并将该属性作为子组件的一个属性传递进去。子组件可以通过props来接收并使用这个数据。例如,父组件中定义属性`txt0`,并将它传递给子组件`Child`: ```javascript <Child txt={this.state.txt0} /> ``` 子组件可以通过props来接收并使用父组件传递的数据: ```javascript this.props.txt ``` 2. 父组件通过回调函数传递数据给子组件: 父组件定义一个回调函数,并将该函数作为属性传递给子组件。子组件可以通过调用这个回调函数,将需要传递的数据作为参数传递给父组件。例如,父组件中定义一个回调函数`getDatas`: ```javascript getDatas(msg){ this.setState({ mess: msg }); } ``` 然后将该函数作为属性传递给子组件`Son`: ```javascript <Son getdata={this.getDatas.bind(this)}></Son> ``` 子组件可以通过调用父组件传递的回调函数,并将需要传递的数据作为参数传递给它: ```javascript this.props.getdata(data); ``` 3. 父组件通过context传递数据给子组件: Context是React提供的一种跨组件传递数据的机制。父组件可以通过定义一个Context,并将需要传递的数据放在Context中,然后子组件可以通过访问Context来获取这些数据。具体的实现可以参考React官方文档中关于Context的介绍。 以上是React父子组件传值的几种常见方式,你可以根据具体的需求选择合适的方式来实现父子组件的数据传递。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React父子组件的传值的方法](https://download.csdn.net/download/weixin_38595850/13633672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [React教程:父子组件传值(组件通信)](https://blog.csdn.net/p445098355/article/details/104519363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [React父子组件传值](https://blog.csdn.net/weixin_45817109/article/details/103628428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

修复儿童缺牙先生

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

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

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

打赏作者

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

抵扣说明:

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

余额充值