React子组件传递给父组件的方法

wu_xiao_qing

于 2018-06-25 16:35:19 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wu_xiao_qing/article/details/80803875

本文介绍了三种实现React组件间通信的方法：使用Redux进行状态管理、利用Refs触发子组件方法及通过回调函数在父子组件间传递数据。这些技术是构建复杂交互式应用的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1)redux状态管理

2)通过refs传递,代码如下所示：

父组件代码：

<QueryBox ref="queryBox" app={this.app} onSearch={this.onSearch} onCount={this.onCount} />

let QueryBoxInstance = this.refs.queryBox as QueryBox;
QueryBoxInstance.onChange();

3)通过回掉函数传递，代码如下：

父组件

 <AddModal
              onOk={(score: any, review: any) => this.handleOk(score, review) as any}
              onCancel={this.hideModal as any}
              loading={this.state.loading}
              studentInfo={this.state.studentInfo}
 /> 

子组件

 <Modal
                    visible={true}
                    title="评分"
                    onOk={()=>{
                        this.props.onOk(this.state.score,this.state.review)
                    }}
                    onCancel={this.props.onCancel}
                    confirmLoading={this.props.loading}
                    okText="确认"
                    className="review"
                    cancelText="取消"
  >