調用子組件的方法 - 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;