调用子组件的方法 - 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

通常你应该通过道具父母传递信息给孩子。

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：

​​

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

Answer 2

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

Answer 3

我们可以通过一个道具在子类： 然后从孩子叫它：this.props.propName（） 我们可以通过字符串，数字，职能，阵列，在对象支撑

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;