Question

我有2个组件，第一个组件具有在第二个组件的async函数之后调用的函数，我想要做的是类似于vue的this.$emit()函数，该函数随时从该组件调用侦听器，如何我该怎么做？

这是我的第一个组成部分

import React, { Component } from 'react';
import SecondComponent from '../Path/to/second/component'

class MainMenu extends Component {
    callThis (data) {
        console.log(data)
    }

    render () {
        return <SecondComponent onDataReceived = {this.callThis} />
    }
}

export default FirstComponent

这是我的SecondComponent

import React, { Component } from 'react';

class SecondComponent extends Component {
    async asyncFunction () {
        const data = await getDataFromApi()
        // call the function from first component here...
    }

    render () {
        return <button onClick={() => this.asyncFuncion} />
    }
}

export default FirstComponent

Answer 1

这是从父代传递的道具中接收数据/使用方法的方式：

async asyncFunction () {
    const data = await getDataFromApi()
    // call the function from first component here...
    this.props.onDataReceived(data);
}

Answer 2

在第一个组件上，您正在向第二个组件发送道具。这是文档：https://reactjs.org/docs/components-and-props.html

要访问第二个组件中的onDataReceived，您可以编写：

async asyncFunction () {
        const data = await getDataFromApi()
        this.props.onDataReceived(data);
    }

Answer 3

您的第二个组件必须调用asyncFuncion，然后在asyncFuncion内可以从props调用callThis函数

class SecondComponent extends Component {
    async asyncFunction () {
        const data = await getDataFromApi()
        this.props.onDataReceived(data)
    }

    render () {
        return <button onClick={() => this.asyncFuncion()} />
    }
}

也不要忘记绑定该callThis，或者只是使用粗箭头功能：

class MainMenu extends Component {
    callThis = (data) => {
        console.log(data)
    }

在异步函数reactjs之后从另一个组件调用一个方法

3 个答案: