Вызов метода родительского компонента из дочернего элемента - 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:

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

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

Edit: о предпочтении между 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;