Reactjs 将属性添加到React-Typescript接口

我认为我使用了正确的语法/术语，如果没有，请告诉我。我正在将一个项目转换为typescript，一切正常——index.tsx文件当前将React.icons设置为coreui库中自定义图标的对象。使用typescript，类型“typeof React”上不存在属性“icons”。

我想我需要扩展React接口/类型声明，将

图标

作为React的

类型

错误出现在下面代码的

React.icons=icons

中的第一个

图标下。如果有人能给我指出正确的方向，我会很高兴的

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

interface IReactIcons extends React {
  icons: object;
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

导入“react app polyfill/ie11”；//对于IE 11的支持
导入“react app polyfill/stable”；
导入“核心js”；
导入“/polyfill”；
从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/store”导入存储；
从“/assets/icons”导入{icons}；
接口IRacticons扩展了React{
图标：对象；
}
React.icons=图标；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

正在尝试在下面添加模块扩展：

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

declare module "react" {
  interface React {
    icons: {};
  }
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister()

导入“react app polyfill/ie11”；//对于IE 11的支持
导入“react app polyfill/stable”；
导入“核心js”；
导入“/polyfill”；
从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/store”导入存储；
从“/assets/icons”导入{icons}；
声明模块“react”{
界面反应{
图标：{}；
}
}
React.icons=图标；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）
您不能使用，因为正如所述，文档：

您不能在扩充中声明新的顶级声明，只能对现有声明进行修补
默认导出也不能扩充，只能是命名的导出
好消息是，您可以使用全局增强

declare global {
  namespace React {
    let icons:any;
  }
}

如果您知道您的
图标是什么类型的
使用它而不是
任何
是否有理由不想只使用
图标
从
导入{icons}从“/assets/icons”在需要时渲染图标？为什么要扩展react并添加一个图标字段？我不会撒谎——我是根据我看到的图标制造商所做的事情而这样做的。如果我删除了
React.icons=icons
，那么没有一个图标呈现。因此看起来像
React.icons
被用作访问图标的全局变量。我建议重构代码，以便在需要时导入图标，并将其直接呈现在组件上，而不是扩展
React
。我认为您是对的，库提供了一个名为的组件，该组件必须使用该全局变量来访问图标。您需要“增强模块”，例如，请参阅。非常感谢！我要试试这个！我打赌这正是我需要它做的。不客气，很高兴它对你有用！