文章/答案/技术大牛

发布

问使用svg作为react组件
EN

Stack Overflow用户

提问于 2020-06-19 23:10:09

回答 3查看 741关注 0票数 0

我正在尝试使用带有react的SVG，但我不能。我尝试了一些解决方案，结果我找不到为什么会出现这个错误：

InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('<svg>
<g transform="translate(0.000000,227.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<

如果有任何人能帮助我，我将非常感激。codesandbox中的代码示例：https://codesandbox.io/s/svg-in-react-r3g6l?file=/index.js

javascript

reactjs

svg

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-06-20 00:13:46

这是我通常做的事情：

访问https://react-svgr.com/playground/并粘贴到您的SVG中，它会将SVG转换为React组件。它允许您将SVG属性作为道具进行传递。

您可以查看它的原始库- svgr，以获得其他用途。

票数 2

Stack Overflow用户

发布于 2020-06-19 23:21:49

您应该使用img标记

import Logo from "./Logo.svg
<img src={Logo} alt="Logo" />

票数 0

Stack Overflow用户

发布于 2020-06-19 23:48:32

“作为新版本create- React -app (v2)新增功能的一部分，我们现在可以将SVG作为React组件导入。”

有关更多选项，请查看本文：using-svg-icons-components-in-react

*编辑:要更改svg的颜色，请使用CSS中的“fill”属性。您可以在svg中添加id或class来选择它。

fill: red;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62479743

复制

React报错之组件不能作为JSX组件使用

https 网络安全 react ide linux

原文链接：https://bobbyhadz.com/blog/react-cannot-be-used-as-a-jsx-component[1]

chuckQu

2022/08/19

2.4K0

如何在react中使用svg icons

svg react

首先，react是支持svg，所以使用svg是没有问题的，但是到目前为止(版本为v15.3.0)还不支持svg的use标签，所以打算使用svg symbol还是趁早放弃，以下为官方的svg支持标签：

IMWeb前端团队

2019/12/04

1.5K0

如何在react中使用svg icons

react svg

该文介绍了如何在React组件中使用SVG图标。首先介绍了传统的使用方式，然后介绍了使用React组件的方式，最后通过一个名为`Mic`的组件示例展示了如何将SVG图标转换为React组件。通过使用Fis3插件，可以自动将SVG转换为React组件，从而简化了React项目中使用SVG的过程。

IMWeb前端团队

2017/12/29

2.8K0

React入门四：React组件的使用

javascript react 渲染

思考：项目中的组件多了后，该如何组织这些组件那？选择1：将所有组件都写在一个js文件中选择2：将所有组件都放到单独的js文件中组件作为一个独立的个体，一般会放到一个单独的js文件中。

用户4793865

2023/01/12

1.3K0

React技巧之将对象作为props传递给组件

https 网络安全 react typescript 编程算法

原文链接：https://bobbyhadz.com/blog/react-typescript-pass-object-as-props[1]

chuckQu

2022/08/19

1.1K0

使用storybook管理React组件

javascript npm 腾讯云测试服务 react babel.js

2018年10月storybook发布了4.0版本，在UI层支持、构建、移动端、stroy参数等多个方面进行了升级优化。本文已React的UI组件为例，演示如何新建/集成Storybook到项目中，并对UI组件进行全方位的管理，包括发布、demo文档、测试等。

IMWeb前端团队

2019/12/03

3.4K0

React中使用类组件

react

接下来我们需要渲染一些Dom，并且定义一些状态数据，在react中响应式数据定义在state变量中

用户6256742

2022/07/06

7640

使用 Fontawesome 的 React 组件

css react

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。

我与梦想有个约会

2020/01/04

2.1K0

使用 Fontawesome 的 React 组件

react css 函数框架图表

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。

我与梦想有个约会

2023/10/21

3190

React Native使用原生组件

reactnative android

概述有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用Javascript重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。我们知道React Native本身对这种偏业务和底层调用是不关心的，这时候我们就想到了原生组件，我们通过调用原生组件，然后经过特定的封装来达到效果。如我们在原生开发中常见的Toast为例：原生模块封装假设我们希望可以从Javascript发起一个T

xiangzhihong

2018/02/05

2.2K0

【React】633- 使用 Hooks 优化 React 组件

react 面向对象编程渲染容器

由于我所在的业务是资讯内容类业务，因而在业务中会经常碰到如下场景：有一个内容列表，列表中需要按照一定的规则插入广告。除了获取广告数据，广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写：

pingan8787

2020/06/24

1.2K0

使用 Meteor 作为 React Native 的实时后端

react

大家好！出(du)差(jia)归来，按时奉上之前提到的 Meteor React Native 三连发中译版！点击「阅读原文」查看完整文章！ Parse最近宣布停止服务，许多公司会寻求它的替代品。这次Parse的关门会让许多人不会首选BaaS产品，转而倾向于自行实现后端，比如说使用Meteor。我们来谈谈如何将一个React Native的App连接到Meteor App（作为服务端）。这篇教程假设你已经安装好了React Native和Meteor，并且能成功运行。如果你还没有配置好React Nati

时见疏星

2018/06/01

1.4K0

使用IOC解耦React组件

容器 react https 编程算法网络安全

除了DI外，另一种实现方式是Dependency Lookup（依赖查找），简称DL。

公众号@魔术师卡颂

2021/03/15

9180

SVG 使用

其他

SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形，主要优势在于可缩放的同时不会影响图片的质量。 SVG 在html 中常用的方法 1.使用<img>元素来嵌入SVG图像 <img src=”http://www.w3school.com.cn/svg/rect1.svg” width=”300″ /> 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no

用户1197315

2018/01/22

2.5K0

React高阶组件HOC的使用

渲染 position 技巧浏览器

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。高阶组件只提供逻辑代码视图代码会做为参数传递给高阶组件进行渲染

明知山

2021/10/25

9750

react-live-route(react的组件缓存)使用

react 缓存渲染编程算法

开题:之前用了react-keeper但是有BUG（scroll的位置不准确,而且onscroll的事件也无法监听到），

biaoblog.cn 个人博客

2022/08/11

1.1K0

把 React 作为 UI 运行时来使用 [每日前端夜话0x22]

react

原文：https://overreacted.io/react-as-a-ui-runtime/

疯狂的技术宅

2019/03/27

2.5K0

React - 组件：类组件

编程算法渲染 react

他有自己的生命周期也有react给他提供的一些内置函数方法。有自己的this和状态。

xing.org1^

2019/12/11

1.9K0

React 组件

react html

接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：

陈不成i

2021/07/29

7530

【React】282- 在 React 组件中使用 Refs 指南

react

使用 React 时，我们的默认思维方式应该是不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。

pingan8787

2019/07/25

3.3K0

相似问题

导入SVG作为react组件

如何使用SVG React组件作为背景？

流星导入SVG作为React的组件

包括SVG资产作为React中组件

111

动态加载svg作为react中的组件

111

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问使用svg作为react组件
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

导入SVG作为react组件

如何使用SVG React组件作为背景？

流星导入SVG作为React的组件

包括SVG资产作为React中组件

动态加载svg作为react中的组件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用svg作为react组件EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

导入SVG作为react组件

如何使用SVG React组件作为背景？

流星导入SVG作为React的组件

包括SVG资产作为React中组件

动态加载svg作为react中的组件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用svg作为react组件
EN