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

最新推荐文章于 2024-06-15 18:00:43 发布

原创

最新推荐文章于 2024-06-15 18:00:43 发布 · 5.4k 阅读

9 ·

CC 4.0 BY-SA版权

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

实现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:''
    }
  }

//回调函数：将传来的参数用this.setState方法修改初始状态值，括号里是参数
_setName(firstName,lastName,year) {
  this.setState({
    firs