React Native父组件调用子组件_reactnative父组件引用子组件-优快云博客

本文通过一个Demo展示了在React Native中如何实现父组件调用子组件的功能。无论组件是否分离，关键在于父组件如何正确地触发子组件的方法。

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

////用组件化写的
import React, { Component } from "react";
import { Text, View } from "react-native";
import Greeting1 from "./Greeting.js";

class Greeting extends Component {
  render() {
    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    console.log(foo);
    
    console.warn(this.props.name)
    console.log(' this is a big date')
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class App extends Component {
  _log(log){
    console.warn(log);
    return null;
  }
  render() {
    console.warn("main begin");
    return (
      <View style={{ alignItems: "center" }}>
        <Greeting name="Rexxar" />
        <Greeting1 name="Jaina" />
        <Greeting name="Valeera" />
        {this._log("0000")}
      </View>
    );
  }
}

// Greeting.js 文件
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import PropTypes from 'prop-types'

export default class Greeting extends React.Component {

  render() {
      console.warn(this.props.name);
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

上面的Demo 就是父组件调用子组件，如果不用组件形式写，放在一个文件里，代码如下所示：

//不用组件化的形式写的
//app.js 文件里
import React, { Component } from 'react';
import { Text, View } from 'react-native';

//组件化形式是这么写
class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {

  _renderCellView(name){
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {name}!</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        {this._renderCellView("RXjava")}
        {this._renderCellView("RNIOS")}
        {this._renderCellView("RNandroid")}
      </View>
    );
  }
}