如何在react中定义一个带有typescript的SVG组件？
在React中定义一个带有TypeScript的SVG组件，您可以按照以下步骤进行：
- 创建一个新的React组件，并将其定义为函数组件或类组件。例如，假设您要创建一个名为
MySVGComponent的SVG组件。 - 在组件文件的开头，使用
import React from 'react'导入React库。 - 在组件定义的下方，使用TypeScript语法为组件Props创建接口。根据SVG组件的需求，可以定义不同的Props接口。例如，假设您的SVG组件需要接收一个
width和height作为Props：
interface MySVGComponentProps {
width: number;
height: number;
}- 在组件定义下方，将Props接口作为泛型参数传递给组件函数或类。例如，如果您选择使用函数组件，可以将Props接口作为泛型参数传递给函数组件：
const MySVGComponent: React.FC<MySVGComponentProps> = ({ width, height }) => {
return (
<svg width={width} height={height}>
{/* 在这里编写SVG的内容 */}
</svg>
);
};如果您选择使用类组件，则可以将Props接口作为泛型参数传递给React.Component类的子类。
- 编写SVG组件的具体内容，根据需要在
<svg>标签内部定义相应的SVG元素和属性。
完整的代码示例如下：
import React from 'react';
interface MySVGComponentProps {
width: number;
height: number;
}
const MySVGComponent: React.FC<MySVGComponentProps> = ({ width, height }) => {
return (
<svg width={width} height={height}>
{/* 在这里编写SVG的内容 */}
</svg>
);
};
export default MySVGComponent;请注意，这只是一个基本的示例，您可以根据自己的需求扩展和修改SVG组件的功能和属性。
对于腾讯云相关产品和产品介绍链接地址，我无法提供。建议您参考腾讯云的官方文档或网站，以获取有关腾讯云相关产品的更多信息。
相关·内容
我完全是一个来自Angular Typescript背景的反应新手。我选择用Typescript学习React是为了让我的转换比用javascript学习react更容易。谁能让我知道很好的基础视频反应与打字。有关于复数视线的基本视频，但可以使用javascript演示它。
我已经使用create- react -app命令创建了一个应用程序，其中包含react项目的框架。
我注意到这个文件有下面的const声明，而我在视频中看到的例子显示了一个带有render方法的类声明。有人能解释一下吗？
Scafolded输出
import React from 'react';
imp
浏览 2提问于2019-08-13得票数 1
我正在向我的组件传递一个SVG图标道具，它是一个包含SVG组件数据的数组，但它在typescript中显示了此错误，我正在使用material UI Type '{ key: number; data: { id: number; icon: ReactNode; }; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inher
浏览 35提问于2021-10-28得票数 1
回答已采纳
我预计svg会变成红色，但颜色#D8D8D8没有任何变化。我在svg中看到了填充，如果我将它转换成一个参数，我就可以使用它，但我更愿意使用React props来设置填充，这样我就可以通过我的css设置一个悬停： svg代码(我的my Sketch导出)： <svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
浏览 32提问于2020-09-05得票数 0
2回答
阅读了一段时间，但似乎找不到适合我的问题。
序言：我使用和构建了一个私有组件库。
发布到github，故事书，汇总等似乎都是正确的。我只放了一个部件。一个<PageWrapper />。在这个组件中有一个<Footer />，它使用3个社交媒体svg图像。
在组件库上的故事书中，这些看起来都很好，而且似乎加载得很好。
现在，我打开了另一个应用程序，尝试消费所谓的可怕的图书馆。我已经有这个应用程序运行nextjs/reactjs/netlify，非常简单的登陆页面中包含基本组件。我克服了github的问题，似乎成功地运行了yarn add @username/c
浏览 20提问于2022-06-07得票数 0
回答已采纳
使用带有for的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件道具都可以有子组件：
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
但是，对于无状态功能组件，情况似乎并非如此：
const MyStatelessComponent =
浏览 2提问于2016-11-22得票数 139
回答已采纳
我正在为模块化的React应用程序使用single-spa。我用的是Typescript，Webpack和svg-url-loader。SVG似乎已经生成并显示(hash.svg)，但是没有正确加载(您看不到图像，只看到一个占位符)。
这是我的Webpack配置：
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "Daboo1998",
projectName: "react-module"
浏览 7提问于2021-10-11得票数 4
我刚接触typescript，想知道如何将属性从我的类组件传递到父类。 我的子类看起来像这样： import React from "react";
type Props = {
startTimeInSeconds: number;
}
type State = {
timeRemainingInSeconds: number;
}
export default class Child extends React.Component<Props, State>{
private timer: any;
constructor(props: Pr
浏览 16提问于2021-06-18得票数 0
回答已采纳
使用create-react-app和JavaScript/TypeScript，我知道我能够“导入”一个SVG，如下所示。我怎样才能用ReasonML做到这一点呢？
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}
浏览 5提问于2020-03-23得票数 3
回答已采纳
我正在开发一个react原生应用程序。我的项目中有一堆本地的SVG文件。我想使用我的自定义组件来渲染文本和SVG图像。 下面是我的自定义组件，用于呈现静态SVG文件的Text和Image： import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
浏览 146提问于2020-07-25得票数 0
我正在尝试将图像(SVG)导入到我的typescript应用程序中
import * as logo from './images/logo';
export default class App extends React.Component<{}, {}>{
render() {
return (
<div className="App">
<header className="App-Header">
浏览 0提问于2019-12-29得票数 1
我正在尝试在一个React应用程序中添加TypeScript。
版本：
"react": "16.9.0",
"typescript": "3.5.3",
我有一个数组
import aLogo from '../images/a.svg';
import bLogo from '../images/b.svg';
const websites = [
{
name: 'A',
src: aLogo,
url: 'https://a.com
浏览 0提问于2019-08-26得票数 29
回答已采纳
1回答
我已经使用React很长一段时间了，现在我想切换到使用。然而，我已经习惯了JSS风格(通过react-jss包)，我不明白我应该如何在TypeScript中使用它们。我还使用classnames包，有条件地分配多个类名，并获得相应的TypeSCript错误。
以下是我的React组件模板：
import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';
const styles =
浏览 3提问于2020-01-06得票数 5
回答已采纳
我希望对我的PascalCase项目中JSX.Element类型的变量强制使用React+Typescript。我经常使用以下模式来创建功能组件，并且我喜欢通过给它一个PascalCase名称来区分我的同名导出：
//MyComponent.tsx
//PascalCase for MyComponent
export const MyComponent= (): JSX.Element =>{
return (
<div>
My Component
</div>
)
}
export default MyComponen
浏览 2提问于2021-06-02得票数 3
回答已采纳
我正在TypeScript中创建一个SVG图标库。到目前为止，SVGR已经非常棒了，但是我需要的最后一部分是生成的类型，以允许将title和ref传递给绑定的组件。
再生产
我不知道这一切可能会有什么帮助，所以我将包括一个回购和一些代码样本。但是使用下面的设置，svgr将从SVG导入创建组件，但不会生成任何类型。因此，每当我尝试使用此包中的图标时，都会警告我，无法找到它的声明文件。
POC回购：
src/index.ts
export { default as TestIcon } from "./svg/test.svg";
export { default as Arrow
浏览 21提问于2022-05-20得票数 0
回答已采纳
(转载于)
我猜这是@types/react和LazyExoticComponent定义的问题...
在带有类型参数的组件上使用React.lazy()时，Typescript无法再编译项目。
给定组件：
import React from "react";
export interface Props<T> {
value: T;
valueCallback: (t: T) => void;
}
export default function TypedComponent<T>(props: Props<T>) {
r
浏览 10提问于2020-05-08得票数 7
我刚刚开始用TypeScript编写反应测试代码，
Login.test.tsx
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
describe('Login', () => {
const login = shallow(<Login />);
});
Type '{}' is missing the following properties f
浏览 2提问于2020-08-20得票数 0
回答已采纳
我正在尝试为typescript中的React编写一个更高阶的函数：(1)需要被包装的组件的某些属性(2)允许在包装器上设置包装的组件属性(3)具有特定于包装器的属性 我基本上可以正常工作，但是当我在封装组件的匿名类上设置默认属性时，我从typescript中得到了一个我无法解决的错误。 我得到的错误是： src/withContainer.tsx:33:3 - error TS2322: Type 'typeof (Anonymous class)' is not assignable to type 'ComponentClass<P & Conta
浏览 106提问于2019-02-07得票数 3
回答已采纳
我有一个显示jpg的图像，但当出现错误时，它将显示一个svg图像。然而，Typescript声明onerror属性只接受字符串。有没有办法用onerror img属性来显示svg或组件？ 下面是我的代码： <img
width="100px"
height="100px"
src="myimg.jpg"
onError={(e) => {(e.target as HTMLImageElement).src ="error.jpg"}}
/>
//
浏览 69提问于2020-04-30得票数 0
你好，我想把道具从index.html传递给App.tsx，正如你所看到的，我使用的是typescript。所以我想用typescript来做。
我的代码
//index.html
<div id="root" name="test"></div> //props name test
//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import A
浏览 1提问于2020-09-07得票数 1
我正在尝试为DropdownIndicator创建自定义组件，并在带有Typescript的react-select上使用，但我对组件的类型有一些问题，因为我不熟悉typescript。
如何在组件上使用@ types /react-select上定义的类型？
我已经安装了@types/react-select，并且已经有了一个，但是我没有找到引用它的方法。
这是我的index.tsx
import React from 'react';
import Select from 'react-select';
import DropdownIndicator f
浏览 0提问于2019-08-18得票数 6
我目前正在使用带有TypeScript的Storybook (v.5.3.18)，并且已经成功地按照说明设置了我的TypeScript webpack.config.js。这可以很好地工作。
然而，我似乎找不到任何方法来成功地将babel插件添加到配置中。下面是我的最新尝试，它不起作用。
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve
浏览 15提问于2020-05-14得票数 3
1回答
如何在react / typescript中动态渲染/导入图像？
我在React中使用Typescript。
以下是我想要实现的目标。
但这是行不通的。它没有解析表达式{ 'assets/icons/' + media + '.svg'}。
<div className="medias">
MEDIAS.map((media) =>
(<img src={ 'assets/icons/' + media + '.svg'} />)
浏览 3提问于2021-04-19得票数 1
我正在尝试在我的Gatsby TypeScript项目中使用svg文件。我正在使用gatsby-plugin-react-svg，我在应用程序上看到的错误是 One unhandled runtime error found in your files. See the list below to fix it:
Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expec
浏览 18提问于2021-10-18得票数 1
回答已采纳
使用TypeScript，我定义了以下道具type和组件class：
type AnimatedElementProps = {
node: HTMLElement;
Svg(props: SVGProps): JSX.Element,
};
class AnimatedElement extends React.Component<AnimatedElementProps> {
constructor(props) {
super(props);
this.node = undefined;
}
render = () => {
浏览 0提问于2019-01-24得票数 1
回答已采纳
我想从插画师生成的SVG文件中呈现图像，我使用的是react-native-svg react-原生的 0.59、react-native-svg-uri，和--这是我的jsx：
<View style={styles.aboutSection}>
<SvgUri
width="150"
height="150"
source={require('../../assets/images/logo_blue.sv
浏览 0提问于2019-05-23得票数 5
回答已采纳
我正在努力学习反应，我正在努力重新定向到页面，其中显示了有关单击项目的详细信息。我增加了反应路由器，但我不知道从这里往哪里走。
我的brewery.js
import React from "react";
class Brewery extends React.Component {
render() {
const name = `${this.props.brewery.name} - ${this.props.brewery.city}`;
return <div>{name}</div>
}
}
export default Brew
浏览 0提问于2018-12-12得票数 0
回答已采纳
我有这个问题的反应本机，反应导航，即使有这个错误导航流仍然工作。
类型' string‘的参数不能分配给类型'{ key: string；params?：undefined；merge?：boolean；}{ name: not；key?：string\未定义；params: not；merge?：boolean；}'.ts(2345)
export function LoginContainer() {
const navigation = useNavigation()
async function handleSignInEmail() {
浏览 15提问于2022-01-18得票数 0
我正在尝试将一个带有一些道具的功能组件发送到另一个组件，并在接收组件中尝试键入检查该组件中的一些道具。代码如下：
// BaseButton.tsx
export type ButtonProps = {
label: string
size?: 'sm' | 'md' | 'lg' | 'normal'
icon?: React.FC<{ size?: number; foo: string }>
} & React.ButtonHTMLAttributes<HTMLButtonEleme
浏览 23提问于2020-05-15得票数 2
回答已采纳
我设法实现了gatsby-plugin-react-svg并使其正常工作，但之后我看到了所有的库图标都是拜拜的。
如果我在我的SVG文件夹中添加更多的svg，这是可以的，但是Box图标库中的所有图标都消失了。
我想使用图标库和我的自定义svg。
这就是我的gatsby-config.js文件的样子
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/,
}
}
},
在JSX中，我使用如
浏览 1提问于2021-07-14得票数 1
回答已采纳
1回答
打开和关闭Menu时出现问题。沿着行驶。我不知道为什么文本只是慢慢地改变位置。请帮帮我。
这是我的devDependencies，我用的是配置的webpack。
"devDependencies": {
"@babel/core": "^7.13.15",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.13.15",
"@babel/preset-
浏览 0提问于2021-09-30得票数 1
2回答
我试图在React中使用SVG获得一个背景模式--本机。
我创建了一个组件，它使用‘react本机-svg’库，如下所示：
import React from "react";
import { SvgXml } from "react-native-svg";
const xml = `
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
<g
浏览 12提问于2021-12-07得票数 0
4回答
它是用Typescript、React和webpack创建的web应用程序。我想通过webpack使用svg文件。然而，我得到了
TS2307: Cannot find module '~/images/slide.svg'.
Typescript文件放在/frontend/src/上，并且成功构建了typescript文件。
然后，我在网站上尝试了一些解决方案。但是我不能解决这个问题。我所尝试的简要描述如下。
我添加了一个文件，其中定义了'typeRoots‘中的类型。tsconfig.json
{
"compilerOptions":
浏览 0提问于2019-11-06得票数 4
回答已采纳
Context：我们正在开发一个带有React和TypeScript的UI组件库，并将react-table用于表组件。该库作为npm软件包发布，并在我们的其他项目中使用。
我在一个名为的文件中配置了react-table-config.d.ts中描述的类型。此外，我还创建了一个新类型的CustomColumn。它基于Column定义并扩展其功能以支持嵌套的字符串访问器(以便TypeScript能够识别foo.bar是否是给定表数据的有效字符串访问器)。
目标：我想为我们的库用户提供这种改进的TypeScript支持。我特别希望他们能够使用CustomColumn。
问题:当我在另一个项目中安
浏览 8提问于2021-03-29得票数 3
3回答
考虑下面的代码来定义一个带有泛型类型参数TRow的React组件
function DataTable<TRow> ({ rows: TRow[] }) {
return (
)
}
在前面的代码中，使用了ES6，并将组件定义为无状态函数：
const DataTable = ({ rows }) => ( ... )
如何定义这样的函数，使其具有泛型类型参数TRow？Typescript是否支持这一点？
浏览 1提问于2017-03-17得票数 3
我想在现有的javascript项目中创建一些typescript组件。我的新组件将全部放在一个文件夹中，并将使用react-typescript编译器，而不是其他组件使用的react编译器。如何将此编译器定义到整个文件夹(以及其中的所有组件)，同时将现有编译器保留在项目中所有现有的bit组件上？
浏览 4提问于2019-12-18得票数 2
我正在使用lib React-notifications-component创建自定义通知。我需要将id从内容属性传递给子组件(通知)，以便关闭带有onClick事件的通知。但是当尝试这样做时，TypeScript总是报告我：“属性'id‘在类型'{ children?：ReactNode；}上不存在”
-父亲
import { store } from 'react-notifications-component';
const notification = () => {
store.addNotification({
id:
浏览 0提问于2021-03-09得票数 0
1回答
我不能使用scss文件中的图像路径作为滚动包的背景。
我的rollup配置如下所示。
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import scss from &#
浏览 3提问于2020-02-25得票数 3
当我在ReactDom.render中调用init()时，只有一个g标记被创建，所有的圆圈都在这个g标记中创建。但是我希望在每个ReactDom.render调用上创建一个单独的g标记。我对React中组件的了解是，我们可以使用React.createClass实例化任意数量的组件。我该怎么做？
var Rect = React.createClass({
render: function() {
return (
React.createElement('circle', {
cx: this.props.cx,
cy:
浏览 2提问于2015-11-29得票数 1
我有一个接受孩子的React组件。 获取Typescript错误： Property 'children' is missing in type ... but required in type 'FixedWidthLayout' 该组件的定义类似于函数语句。 export default function FixedWidthLayout { ... } 我不想把它写成和表达式一样.. 即 export const FixedWidthLayout = () => {...} 因此做一些像这样的事情。 const FixedWidthLayout:
浏览 65提问于2020-06-12得票数 0
回答已采纳
1回答
我有以下内容：
import React, { ReactElement } from 'react'
interface Props {
icon: JSX.Element; // should accept only svg
fill?: string;
stroke?: string;
}
export default function AppIcon(props: Props): ReactElement {
// TODO:
// Replace: svg *[fill] = props.fill
// Replace: svg *[str
浏览 2提问于2020-03-16得票数 1
回答已采纳
包含了一个typescript定义文件，但它不能工作(对我来说)。在我看来，导出的类型(ReactDatetime)与实际中的类型(Datetime)不同。
我继续修改了react-datetime.d.ts类型文件，以导出(我认为)正确的类型(在中可用)：
interface Datetime extends React.ComponentClass<DatetimepickerProps> {}
export { Datetime }
TypeScript抱怨说它找不到Datetime
(26,10): error TS2304: Cannot find name 'D
浏览 2提问于2016-09-10得票数 3
回答已采纳
我正在尝试创建一个简单的页面，其中包括两个主要部分：Menu和Guide。在我的App,tsx中，我有：
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
这很好。
但是，在./Guide/Guide.tsx中，我有：
import React, { Component } from
浏览 3提问于2021-12-20得票数 0
回答已采纳
1回答
我正在尝试发布一个用Typescript编写的React组件，我对什么是最好的方式有一些疑问
我的工作区：
./src
index.tsx
styles.module.css
logo.svg
SubcomponentFolder
index.tsx
styles.module.css
-To将其发布到包管理器(npm)
我创建了一个tsconfig文件，其中包含：“声明”：true，“模块”："commonjs"，“目标”：“es5”，"jsx"："react“
然后运行tsc &&
浏览 0提问于2020-09-06得票数 0
我想使用material-ui，使用react和typescript。我想把属性传递给组件，但是不知道怎么做。我使用material-UI代码库中的react-typescript示例。我尝试的内容如下：
添加一个属性接口：
const styles = (theme: Theme) =>
createStyles({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
},
});
interface IndexProps
extends
浏览 3提问于2018-08-24得票数 0
回答已采纳
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
我没有在我的reactjs项目中使用typescript，但我仍然想用JSDocs来记录我的组件。
问题是我有一个带有React.forwardRef的函数组件，我想创建一个指向ref的JSDoc，因为我使用useImperativeHandle并将不同的值传递给ref。
是否可以使用JSDoc来记录ref，以显示我在useImperativeHandle中传递的方法和属性？如果是，是如何实现的？
Where是我想要的示例
在一个组件中，我使用了带有useImperativeHandle的React.fowardRef
export const Foo = React.fowardRef((p
浏览 7提问于2020-08-01得票数 5
1回答
呈现Box会产生以下错误：
表达式产生的联合类型对represent.ts(2590)来说太复杂了。
正如我所看到的，这是由于同时安装了@mui/material和@react-three/drei & @react-three/fiber。
这个错误背后的原因是什么？我只从Box导入mui组件。有类型混淆什么的吗？解决方案/解决办法是什么？
复制步骤：
设置一个cra应用程序：npx create-react-app my-app --template typescript
将下列软件包添加到package.json中
"dependencies&
浏览 20提问于2021-10-19得票数 3
1回答
我正在使用‘重新图表’为我的项目创建图表，并使用‘react pdf’生成报告。“重新图表”在使用DOM时在DOM上创建一个svg，并显示一个图形。
有什么方法可以将这两者结合起来，并通过react在我的报告中添加我的“重新图表”组件？例如-在一个<Document/>标记中。
我看到了一种解决方案，它提供将重图表的 svg转换为png，将其保存在本地，然后导入它并通过react中的<Image/>组件使用。
寻找一个更直截了当的方法来解决这个问题。
浏览 2提问于2021-07-20得票数 5
回答已采纳
2回答
在App.tsx中，我将<Left />和<Right />传递给一个名为<SplitScreen />的导入组件
显然，“子”道具需要显式输入，因为响应18。如果我将其键入为React.Element[]，那么SplitScreen.tsx可以工作，但App.tsx抛出：
Type 'Element' is not assignable to type 'ElementType<any>'
如果我键入它为React.ReactNode (这似乎是目前的共识)，App.tsx可以工作，但是SplitScreen.t
浏览 6提问于2022-08-21得票数 0
我看过许多文档和示例，但我似乎仍然不太理解如何在React Native中使用带有TypeScript的功能组件的forwardRef。下面是一个示例，其中我创建了一个带有自定义函数的MyCustomComponent，我尝试通过创建ref从父级调用该函数。但是，由于ref的定义不正确且为null，我显然收到了一条错误消息，告诉我该函数不存在。请帮助我理解如何在React Native中正确使用forwardRef。提前感谢！
interface MyCustomComponentProps {
title: string
}
const MyCustomComponent: React
浏览 2提问于2020-10-23得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
