React Native 子组件传值给父组件的方式-爱伦尔生活百科

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

电脑手机 2024-11-25 18:40:02 909

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

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:''