如何在我的 React 应用程序中使用另一个类的函数？ [复制]答案

【问题标题】：How can I use a function from another class in my React app? [duplicate]如何在我的 React 应用程序中使用另一个类的函数？ [复制]
【发布时间】：2021-09-01 14:11:44
【问题描述】：

这是我的Tools.js

export default class Tools extends React.Component {
    show() {
        console.log(1)
    }
}

这是我的App.js

export default class App extends React.Component {
    componentDidMount() {
        Tools->show(); // ???
    }
    
    render() {
        return (
            <div className="App">
                <Loading />
                <Header />
            </div>
        );
    }
}

我想在componentDidMount() 的App 中调用show() 函数

如何将另一个类的函数调用到 App 中？

【问题讨论】：

您可以在 App 类文件的顶部导入您的 Tool 类，然后您就可以调用 show()
@JoshuaTerrill 我导入这个：import Tools from './components/class/Tools';
@MattU 是的，我看到了。但我看不懂
Tools.prototype.show() - 但你不应该这样做！只需在单独的文件中定义通用函数
因为你的代码会被卷入。常见的做法是将每个常见功能分隔在其自己的文件中的单独函数/类中。在近功能中，您会忘记此功能在其他组件中使用，您将其调整为此工具组件。这是非常糟糕的做法。

标签： javascript reactjs

【解决方案1】：

由于您导入了一个类，您需要使用 new 实例化它，然后使用您的 show 方法。

在您的 App.js 中：

import {Tools} from 'Tools.js';

const myTool = new Tools();

export default class App extends React.Component {
componentDidMount() {
    myTool.show();
}

render() {
    return (
        <div className="App">
            <Loading />
            <Header />
        </div>
    );
}

}

【讨论】：

谢谢。我可以直接访问像php这样的功能吗？ Tools::show(); ?