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

已于 2023-05-18 18:06:22 修改
阅读量936 收藏 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时遇到的需求，即如何将React组件转换为DOM字符串。作者发现并应用了`react-dom/server`中的`renderToString`API来实现这一功能。尽管该API通常关联于服务端渲染，但文档表明它也可在非流式环境中工作，如浏览器环境。作者对此进行了探索并享受到了问题解决过程的乐趣。
摘要由CSDN通过智能技术生成

需求

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

收获

找到了官网的API——renderToString

作用完美实现了需求

思考

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

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

Tips

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

ATWLee
关注
专栏目录
16 「装修阶段」- 添加状态管理 redux
zz_jesse的博客
05-21 100
导读 本节标题：「装修阶段」- 添加状态管理 redux 本节主旨：完善骨架模型，支持 redux 状态管理，重点关注如何实现数据同构 本节配套代码： https://github.com/Bigerfe/koa-react-ssr/tree/better/packages/my-react-ssr-redux 正文 小册的内容进行到这里，本应用骨架的搭建已经接近尾声，整体上目前已经比较完善，可以...
Linaria 也许是现在 React 最佳的 JSS 方案
网络篝火
10-23 1384
React 社区一直在探索各种 JSS 方案，比如现在比较出名的 styled-components ，但他们或多或少都有些问题存在，但是社区对 JSS 方案的探索一直没有停下，而现在看上去最像最佳方案的是 Linaria 库。翻了下这个库相关的中文资料几乎没有，于是写了这篇与大家分享介绍下相关的内容 介绍 Linaria 是一个 零运行时 的JSS 框架，其特点有： 将 CSS 纳入到 JS 体系中，并且这种支持是零成本的！ CSS 相关代码会在编译期被抽出到 CSS 文件中 类 Sass 的 CSS
react解析html字符串方法
congxue666的博客
04-21 2265
react解析html字符串方法
快速将React组件渲染成Stringhtml的工具
08-12
快速将React组件渲染成String (html)的工具
ReactNode转为html,node.js - html string to html (react front-end) - Stack Overflow
weixin_39639965的博客
05-31 264
This is my string that I want to render using reactDOM:Websockets 101"https://fonts.googleapis.com/css?family=Roboto">="../stylesheets/projects_showcase.css" type="text/css">dy>This is the st...
React 初学 - 用 renderToString 在服务器上渲染 React - 个人笔记54
树上骑个猴的博客
08-11 2007
到目前为止，你已经能够在客户端上渲染 React 组件，一般来说我们都是这么做的。然而，在一些用例中，在服务器上渲染一个 React 组件是有意义的。由于 React 是一个 JavaScript 视图库，所以使用 Node 让 JavaScript 运行在服务器上是可行的。事实上，React 提供了一个可用于此目的的renderToString()方法。 有两个关键原因可以解释为什么服务器上的渲染可能会在真实世界的应用程序中使用。首先，如果不这样做，你的 React 应用程序将包含一个代码量很少的 HTM
react-element-to-jsx-string:将ReactElement变成相应的JSX字符串
05-11
react-element-to-jsx字符串 将ReactElement变成相应的JSX字符串。 对于单元测试和您可能想到的任何其他需求很有用。 特征： 支持嵌套和深层嵌套，例如<div a={{b:>}}}} /> props：支持字符串，数字，函数（以prop={function noRefCheck() {}}内联），对象，ReactElement（内联），正则表达式，布尔值（带有或不带有），... 按字母顺序排列道具 以确定的顺序对对象键进行排序（ o={{a: 1, b:2}} === o={{b:2, a:1}} ） 处理ref和key属性，它们总是在props之上 React的JSX文档缩进样式 用生成的目录 设置 yarn add react-element-to-jsx-string [--dev] 用法 import R
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 - Learning React
最新发布
07-02
- **Hello World with Stateless Functions**: 使用无状态函数创建一个简单的“Hello World”组件，介绍React中的函数式组件。 - **示例**: 提供具体的代码示例来解释无状态函数组件的实现方法。 ##### 创建React...
（React启蒙）认识React nodes
weixin_33922670的博客
09-09 500
本章是翻译的React启蒙系列的第四章，主要将讲述如何使用纯JavaScript语句创建React节点，本章内容依旧非常基础，通过阅读本章内容你将了解React nodes的定义，React.createElement()所需的各参数的实际意义以及部分React事件相关知识。 什么是React nodes？ 定义： React node是...
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 > ) ; /**
【JS树结构转换的跨平台应用】：多环境转换策略与实践
当我们在JavaScript（JS）中进行树结构转换时，通常需要了解树的遍历方法、节点操作以及转换算法，以便将一种树结构转换为另一种树结构或平面结构。 ## 1.1 树结构的基本概念 在JS中，树结构通常可以通过对象和...
React面向组件编程
Java硬件工程师的博客
04-27 985
1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。更新阶段: 由组件内部this.setSate()或父组件重新render触发。更新阶段: 由组件内部this.setSate()或父组件重新render触发。3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
react-dom 的 renderToString 与 renderToStaticMarkup (转载)
yupeng2011的专栏
02-06 2239
转载地址：http://www.jianshu.com/p/5fa6d6c63d96 介绍 renderToString 与 renderToStaticMarkup 都是同 render 一样都是 react-dom 包提供的方法 不过 renderToString 和 renderToStaticMarkup 在 react-dom/server 内 import {ren
react中字符标签转换的展示
weixin_45315794的博客
05-28 758
react中字符标签转换的展示 在react中获取的字符串标签转换成正常的标签在浏览器中展示标签内的数据，react提供了一个API：dangerouslySetInnerHTML，它可以帮助转换成正常标签及内的数据； <div className="policy-styles" dangerouslySetInnerHTML={{ __html: htmlContent}}></div> htmlContent表示展示要做div内的字符标签，如 let htmlContent =
Taro+react开发（54) 数组转字符串join
歌谣的博客
09-12 949
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 数字转字符_深入浅出 React -- JSX
weixin_32304785的博客
01-31 2294
什么是 JSX JSX 是一个 JavaScript 的语法扩展。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能 在 React 中，JSX 仅仅是 React.createElement(component, props, ...children) 函数的语法糖如下 JSX 代码：<MyButton color="blue" shadowSize={2}&gt...
前端学习（2299）：react之ref转发字符串方式
歌谣的博客
09-28 306
<!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...
react精华之服务端渲染 ReactDOMServer 16版本后renderToString 转化成renderToNodeStream的好处 React v16 之后用 React.hydr
gwdgwd123的博客
12-16 7699
React v16 之后用 React.hydrate 替换 React.render，这个 hydrate 就是“注水” 为什么要服务器端渲染 最近几年浏览器端框架很繁荣，以至于很多新入行的开发者只知道浏览器端渲染框架，都不知道存在服务器端渲染这回事，其实，网站应用最初全都是服务器端渲染，由服务器端用 PHP、Java 或者 Python 等其他语言产生 HTML 来给浏览器端解析。 相比...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值