React Native 子组件传值给父组件的方式

最新推荐文章于 2025-05-29 10:06:46 发布

一点心≈

最新推荐文章于 2025-05-29 10:06:46 发布

阅读量5.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React-Native

本文链接：https://blog.youkuaiyun.com/baihailing/article/details/85232322

本文介绍了在React Native中实现父子组件间通信的方法，包括通过props传递初始化数据和回调函数，以及子组件通过触发回调将数据传回父组件。还提及了直接export子组件属性给父组件的不常用方式。

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

实现React Native 中父子组件通信间的双向数据流，思路如下：

1.父组件向子组件传递props,其中props 中带有子组件的初始化数据以及回调方法；

2.子组件手动触发父函数传递进来的回调方法，同时将子组件的数据传递出去。

PS.使用 props 来传递事件，并通过回调的方式实现，这样的实现其实不是特别好，但在没有任何工具(redux)的情况下不失为一种简单的实现方式

父组件：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
//import profiles, {firstName, lastName, year} from './profile.js';
import Profiles from './profile.js';

export default class HelloWorldApp extends Component {
  //初始状态
  constructor(props) {
    super(props)
    this.state = {
      firstName:'',
      lastName:'',
      year:-1,
      allName:''