时间戳

首页 > 解决方案 > 如何在 React Typescript 中使用来自另一个组件的函数

reactjs - 如何在 React Typescript 中使用来自另一个组件的函数

问题描述

我有两个组件，一个用于 API，另一个用于 UI。我正在尝试从 UI 组件中的 API 组件访问一个函数，如下所示，

import APIComponent "./APIComponent";
APIComponent.getData().(response:any) => { //showing error here as "Property 'getData' does not exist on type '{ APIComponent: () => any; }'"
    console.log(response);
  })

下面是我的 APIComponent，

const APIComponent=():any=>{
const getData=():any =>{
//forming request
}
}

提前致谢。

标签： reactjstypescript

解决方案

您应该先导出它们，没有默认导出，这样就可以了

export const APIComponent=():any=>{}
export const getData=():any =>{}

然后尝试导入它们

import {getData} "./APIComponent";

或尝试导出默认值和对象，并在该对象中添加函数作为方法，如下所示

export const APIComponent = () => {};
const getData = () => {
  alert("Getting the data");
};
export default {
  getData
};

然后您可以在没有 Destructure Syntax 的情况下实际导出和导入它们

import APIComponent from "./APIComponent"

   APIComponent.getData();

看看这个沙盒 https://codesandbox.io/s/morning-feather-9z24o?file=/src/App.js

推荐阅读