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

TheMan68 发表于 Dev

侠客68

我正在开发我的第一个应用程序，但仍在学习流程。因此，假设我有一个名为：

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

在此先感谢您的帮助。

拉尔克米姆

通常，您应该通过道具将信息从父母传递给孩子。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。