从子组件调用父组件的方法 - React Native

Posted 2023-02-22

【中文标题】从子组件调用父组件的方法 - React Native

【英文标题】：Calling a method of a parent component from child - React Native

【发布时间】：2016-12-03 17:01:07

【问题描述】：

我正在开发我的第一个应用程序，并且仍在学习流程。 所以假设我有一个名为：

拥有方法 HelloWorld() 的父级，如下例所示：

import React,  Component  from 'react';

class Parent extends Component 
    Helloworld() 
        console.log('Hello world');
    

    render () 
        return (
            <View>this.props.children</View>
        )
    


module.exports = Parent;

然后我想将它导入另一个组件并使用它的方法，那么我该怎么做呢？ 我会写另一个简短的例子来说明我将如何实现它。

import React,  Component  from 'react';

import  Parent  from 'path to parent'; 
//or
const Parent = require('path to parent');
//which of these is better?

class Home extends Component 
    Helloworld() 
        console.log('Hello world');
    

    render () 
        return (
            <Parent>
                // this is what i need
                <Button onClick=parent.Helloword()>Some Button</Button>
            </Parent>
        )
    


module.exports = Home;

非常感谢您的帮助。

【参考方案1】：

通常你应该通过 props 将信息从父母传递给孩子。

parent.jsx：

import Child from './child';

class Parent extends Component 
    constructor(props) 
        super(props);

        this.helloWorld = this.helloWorld.bind(this);
    

    helloWorld() 
        console.log('Hello world!');
    

    render() 
        return (
            <View><Child method=this.helloWorld /></View>
        );
    

child.jsx：

class Child extends Component 
    constructor(props) 
        super(props);
    

    render() 
        return (
            <Button onClick=this.props.method />
        );
    

编辑：关于import 和require 之间的偏好，我相信这是一个品味问题，但我认为import 更干净。

【讨论】：

感谢您回复我。我还没有时间测试这个，但我会尽快给你反馈。

import和require还有一个区别我忘了说：import只能用在文件的开头，而require可以用在任何地方。

这里的两个答案都有效，但我发现这个答案更适合我的需要。非常感谢

【参考方案2】：

您可以阅读React Native-Tutorial-What's going on here? 关于import。和here

【讨论】：

我会标记你的答案，但不会将其标记为答案，因为它只是这个问题的一半。非常感谢。

【参考方案3】：

我们可以在子类中传递一个prop： 然后从孩子那里调用它：this.props.propName() 我们可以在prop

中传递字符串、数字、函数、数组、对象

import React from 'react';
import 
  View,
  Text,
 from 'react-native';

var Parent = React.createClass(   
  render: function() 
    return (
      <Child foo=()=>this.func1() bar=()=>this.func2() />
    );
  ,
  func1: function()
    //the func does not return a renderable component
    console.log('Printed from the parent!');
  
  func2: function()
    //the func returns a renderable component
    return <Text>I come from parent!</Text>;
  
);

var Child = React.createClass(   
  render: function() 
    this.props.foo();
    return (
      <Text>Dummy</Text>
      this.props.bar()
    );
  ,
);

module.exports = Parent;

【讨论】：

感谢您回复我。我还没有时间测试这个，但我会尽快给你反馈。

这个答案也很好，只是上面的答案更适合我的需要。谢谢