react函数式组件转化为string---renderToString

已于 2023-05-18 18:06:22 修改
阅读量847 收藏 1
点赞数
分类专栏： React技术栈相关 文章标签： react.js renderToString
于 2023-05-18 18:04:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BWater_monster/article/details/130752407
版权

需求

使用aggrid的过程中，某个自定义的图标需要传dom的字符串。
但在react的开发中，一般都是组件的概念（ReactNode，JSX.Element）
因此需要一个方法将dom组件转化为字符串

收获

找到了官网的API——renderToString

作用完美实现了需求

思考

这个API是react-dom/server包里的api，和大佬讨论，看这名字，server，感觉这个包里的api应该运行在服务端而不是浏览器环境呢。为啥会生效了呢。

经过看文档描述
在这里插入图片描述
他non-streaming environments，应该就是可以运行在浏览器环境的意思吧。不太懂streaming的概念。

Tips

思考讨论和探索的过程令人回味和上瘾！

ATWLee
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（2299）：react之ref转发字符串方式
歌谣的博客
09-28 294
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta ht...
katexWithDelimiters:允许在katex中渲染包含数学表达式和katex中其他文本的混合字符串RenderToString
04-28
katexWithDelimiters 允许在katex RenderToString中渲染包含数学表达式和其他文本的混合字符串 支持 \（ 数学 \） $$数学$$ 安装 将katexDel.js添加到您的项目 < script src =" katexDel.js " /> 用法 var result = renderWithDelimitersToString ( "this is an equation $$ y=x^{-2} $$ " ) ;
react-formatted-string:一种用React组件替换字符串的简单安全的方法
04-23
React格式的字符串 使用React组件进行字符串替换的安全简便方法。 安装 npm install react-formatted-string 用法 单次更换 import formattedString from "react-formatted-string" ; const App = ( ) => { const siteLink = formattedString ( "Check out my {0}" , < a xss=removed> website. < / a > ) ; return ( < main> < h1> Hello World! < / h1 > < p> { siteLink } < / p > < / main > ) ; /**
react/js 各数据类型转换
bulucc的博客
11-03 1664
react/js 各数据类型转换
React面向组件编程
Java硬件工程师的博客
04-27 565
1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。更新阶段: 由组件内部this.setSate()或父组件重新render触发。更新阶段: 由组件内部this.setSate()或父组件重新render触发。3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
Taro+react开发（54) 数组转字符串join
歌谣的博客
09-12 932
value.map((item, index) => { arr.push({ industryCode: item }); }); console.log(arr, "arr1111"); console.log(arrcode, "111arr1111"); console.log(arrcodeList, "arrcodeList"); console.log(value.join("-"), "join"); this.s...
react-smooth-dnd：React包装器组件以实现smooth-dnd
02-05
快速和轻量级的拖放式可排序库，用于React，具有许多配置选项，涵盖许多d＆d场景。 它为动画使用css过渡，因此在可能的情况下会对其进行硬件加速。 这个库包含了包装在React 库上的React组件。 显示，不告诉！ ...
react-string-replace:一种使用React组件安全地进行字符串替换的简单方法
05-11
又名将字符串转换为React组件的数组 安装 $ npm install --save react-string-replace 用法 简单的例子 const reactStringReplace = require ( 'react-string-replace' ) reactStringReplace ( 'whats your name' , ...
React用于React组件CSS构造函数-React开发
05-27
每个React组件都有一个用于功能逻辑的内置javascript构造函数。 介绍CSS构造函数的样式！ 从'react'导入React； 从'css-constructor'导入css； //吗？ 每个React组件都有一个用于功能逻辑的内置javascript构造函数。...
react-card-flip:用于翻牌动画的React组件
04-29
React Card Flip是允许您使用卡片翻转动画的工具。 CSS的功劳归。 演示与范例 现场演示： 要使用npm在本地构建示例，请运行： npm install npm run build-example && npm run start 要使用yarn在本地构建示例，请...
react-ace：React Ace组件
02-04
Ace的一组React组件 版本8注意！ ：我们已经停止了对Brace的支持，现在使用Ace-build。 请阅读有关如何迁移的文档。 示例正在更新。 安装 npm install react-ace ace-builds yarn add react-ace ace-builds ...
在React项目中将类组件转换为功能组件（使用React Hooks）
Lily_miao的博客
03-02 2851
接下来介绍一下如何使用react hooks（react钩子）将类组件转换为功能组件。 说明：react hooks（react钩子）必须在react 16.7版本上运行 react在16.7alpha版本中引入了react hooks（react钩子）的使用，hooks（钩子）是如何工作的？公开了两个新的api来处理状态和生命周期方法（他们是类函数的核心组件），这些api是useState和...
react中将带标签的字符串转义为html解析
热门推荐
milklili的博客
12-13 2万+
使用 dangerouslySetInnerHTML={{ __html: htmlString}} 范例： return ( {props.record.contents.map(value => ( ) )} )
将对象转化为字符串，并且将对象中的key去掉引号
qq_46472106的博客
03-08 471
一，对象的value中没有地址，没有： export function rmMarks(code) { var codeArray = code.split('\n'); codeArray = codeArray.map(i => { if (i.indexOf(':') != -1) { let prefix = i.split(':')[0]; let suffix = i.split(':')[1]; prefix
react 将字符串转成html
banzhuanren1的博客
10-11 3088
在写项目的过程中，经常遇到渲染的数据是数组内嵌套数组的，之前都是用父子组件传值的方式来解决，今天发现项目中特别多这样的需求，如果都用子组件的话，就需要创建很多子组件，工作量也增加了很多。所以就想到了将html字符串转换成html; 该方法只适合纯静态展示，如果需要逻辑操作，建议还是使用父子组件传值的方式 方法如下： import React , { Component } from 'react'...
react 中如何把一串字符串分割开来
1363648943的专栏
08-20 1万+
问题：     我想把这一串字符串切割下来，换行显示。          我要的效果：          我要实现的效果：        解决方法：       1､用正则                 word = mainfunctiondescription.replace(' ', '\n');                 word = mainfunctio...
react字符串拼接(中间部分)
江苏小白龙
03-27 1万+
网上看了下好多多是es5写法不是最新的而且都是在末尾追拼接记录下给有需要的童鞋 楼主需要做加载更多所以要在rul中追加一下当前页数 //构造器 constructor(props) { super(props); //当前页 this.page=1 } 格式为 (“字符串” + this.page + “字符串”); va r URL =("http://mobile.ximala...
react 函数组件中 使用element-plus
最新发布
05-22
要在 React 函数组件中使用 Element Plus，你需要先安装 Element Plus 库。可以使用 npm 或 yarn 安装： ``` npm install element-plus ``` 或者 ``` yarn add element-plus ``` 然后在你的 React 组件中导入需要的 Element Plus 组件。例如： ```jsx import { Button } from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; function MyComponent() { return ( <div> <Button type="primary">Click me</Button> </div> ); } ``` 需要注意的是，Element Plus 是 Vue.js 的 UI 组件库，而不是 React 的，因此在使用 Element Plus 组件时需要手动导入对应的 CSS 样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值