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

Question

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

拥有方法 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;

非常感谢您的帮助。

Answer 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 更干净。

Answer 2

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

Answer 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;