正文 

当前位置： 首页 > 源码 >

ReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX

     2023-02-21     180

关键词：

【中文标题】ReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX【英文标题】：ReactJs - Converting raw HTML with nested React Component into JSX 【发布时间】：2016-10-12 18:36:35 【问题描述】：

我最近一直在尝试在一个单独的文件中定义我渲染的 JSX，即使用 HAML，然后使用带有 Webpack 的加载器将 HAML 转换为可用的 JSX。为此，我首先使用 haml-haml-loader 模块将 HAML 转换为 HTML，然后使用 html-to-react 模块完成工作。但是，我发现有很多方法可以做到这一点，而不仅仅是这里概述的一种。 这在 HAML 是纯 HAML 时效果很好，例如

.wrapper
    %p Hello World

然而，React JSX 的美妙之处在于，您可以在提供给渲染函数的 JSX 中嵌套其他 React 组件的标签。所以，我当然想通过 HAML 定义该功能：

.wrapper
    %Greeting/

当通过 Webpack 运行时返回以下 HTML：

<div class="wrapper">
    <Greeting>
</div>

作为一个字符串。看起来不错，对吧？但是，当使用 dangerouslySetInnerHtml 或 html-to-react npm 包（以及许多其他模块）时，转换后的 JSX 变为：

<div class="wrapper">
    <greeting></greeting>
</div>

这不是预期的 JSX。 关于如何进行的任何想法？

【问题讨论】：

【参考方案1】：

要在 JSX 中渲染 HAML，您可以使用 https://github.com/dingbat/haml-jsx-loader 库。 这是一个 Webpack 加载器。 然后你可以有类似的东西

render() 
  return (~
    .wrapper
      <Greetings />
  ~);

很酷，不是吗？

如果不使用 Webpack，还有其他库（主要是在 JSX 中实现 Jade）。

【讨论】：

是否可以使用带有 react-native 的 3rd 方 reactjs 组件，如谷歌地图？

】是否可以使用带有react-native的3rd方reactjs组件，如谷歌地图？【英文标题】：Isitpossibletouse3rdpartyreactjscomponentswithreact-nativelikegooglemaps?【发布时间】：2015-09-1400:45:04【问题描述】：嗨，我是新来的本地反应。是否可以将3rd方reactjs... 查看详情

带有 ReactJS 的 Django 表单

】带有ReactJS的Django表单【英文标题】：DjangoFormswithReactJS【发布时间】：2017-07-0623:03:59【问题描述】：我有使用Django模板呈现的Django表单。现在我想将React组件添加到其中一个表单字段（从长远来看可能会添加到多个字段）。根... 查看详情

为 React 搜索栏使用带有嵌套样式的样式化组件，尝试将两个不同的 SVG 放置在搜索栏的相对两侧

】为React搜索栏使用带有嵌套样式的样式化组件，尝试将两个不同的SVG放置在搜索栏的相对两侧【英文标题】：UsingStyledComponentswithnestedstylesforReactSearchBar,tryingtoplacetwodifferentSVGsatoppositesidesofthesearchbar【发布时间】：2020-08-2117:48:36... 查看详情

reactjs学习笔记-组件嵌套与组件复用

我们终要远行，最终告别稚嫩的自己。使用React来构建web应用，每个页面都将是多个组件组成，并且相互嵌套来构成的，接下来就学习下组件的嵌套。一、组件嵌套：背景交代：1、创建一个html，包含引用的相关js、需要被渲染的... 查看详情

React Hook Form：提交带有嵌套组件的表单或提取嵌套组件的字段提交

】ReactHookForm：提交带有嵌套组件的表单或提取嵌套组件的字段提交【英文标题】：ReactHookForm:Submitaformwithnestedcomponentsorextractfieldsofnestedcomponentstosubmit【发布时间】：2021-03-2209:23:33【问题描述】：我有一个包含多个输入字段或单选... 查看详情

ReactJS：组件未在嵌套路由中呈现

】ReactJS：组件未在嵌套路由中呈现【英文标题】：ReactJS:ComponentisnotrenderinginNestedRouting【发布时间】：2021-05-1600:16:36【问题描述】：我正在使用"react-scripts":"4.0.2"，我所有的组件都是ReactHooks。我的逻辑涉及嵌套路... 查看详情

带有动态子组件的 ReactJS 布局组件

】带有动态子组件的ReactJS布局组件【英文标题】：ReactJSlayoutcomponentwithdynamicchildcomponents【发布时间】：2015-04-0522:15:08【问题描述】：使用React0.12.2并给定一个布局组件，例如一个托盘：<divclassName="tray"><divclassName="tray__itemtr... 查看详情

ReactJS：将 html 文件转换为 React 组件

】ReactJS：将html文件转换为React组件【英文标题】：ReactJS:convertinghtmlfilesintoReactcomponents【发布时间】：2017-01-0611:43:03【问题描述】：假设我有具有不同表单数据的Test1.html,Test2.html,Test3.html...etc文件。我想生成具有完整信息的reactJS... 查看详情

React 如何使用 refs 来聚焦/模糊？

...布时间】：2021-06-1411:52:50【问题描述】：我正在阅读来自Reactjs.org的React文档，但它似乎不适用于我想做的事情。我想渲染一个带有嵌套div的组件。单击每个嵌套的div后，它会变成一个输入。在特定div之外单击时，它会将输入转... 查看详情

reactjs学习笔记-组件嵌套与组件复用

我们终要远行，最终告别稚嫩的自己。使用React来构建web应用，每个页面都将是多个组件组成，并且相互嵌套来构成的，接下来就学习下组件的嵌套。一、组件嵌套：背景交代：1、创建一个html，包含引... 查看详情

带有 Flux 的嵌套循环 React 组件，父级或子级上的更改侦听器？

】带有Flux的嵌套循环React组件，父级或子级上的更改侦听器？【英文标题】：Nested-loopReactcomponentswithFlux,change-listenersonparentorchildren?【发布时间】：2015-05-2320:29:42【问题描述】：我正在React/Flux中构建WordDojo克隆。游戏本质上是Boggl... 查看详情

Reactjs：如何在组件内创建带有 args 的函数

】Reactjs：如何在组件内创建带有args的函数【英文标题】：Reactjs:Howtocreateafunctionwithargsinsideacomponent【发布时间】：2022-01-0815:09:23【问题描述】：在React中，有时组件内部有一个函数，用于当项目为active或pressed时，如下面的Pressable... 查看详情

从 ReactJS 外部渲染组件

】从ReactJS外部渲染组件【英文标题】：RenderacomponentfromoutsideReactJS【发布时间】：2015-03-1020:52:08【问题描述】：来自here：“在React之外获取React组件实例句柄的唯一方法是存储React.render的返回值。”我需要在React之外渲染一个React... 查看详情

重新渲染 Reactjs 数组组件

】重新渲染Reactjs数组组件【英文标题】：Re-renderingReactjsarraycomponents【发布时间】：2019-01-0121:26:14【问题描述】：我正在使用带有以下组件的React实现一个非常简单的图表页面：设计师：有专栏。列：如果有工具，它会呈现图表... 查看详情

带有省略号的 ReactJS 多行文本区域

】带有省略号的ReactJS多行文本区域【英文标题】：ReactJSmultilinetextareawithellipsis【发布时间】：2019-04-0822:09:24【问题描述】：我正在尝试使用多行文本字段构建组件。如果输入的文本超过2行，那么我想为文本溢出添加省略号(...)... 查看详情

ReactJS：如何将 knockoutJS 页面包装在 React 组件中

】ReactJS：如何将knockoutJS页面包装在React组件中【英文标题】：ReactJS:HowtowrapknockoutJSpageinsideReactcomponent【发布时间】：2019-06-0114:10:33【问题描述】：查看(HTML)<p>Firstname:<inputdata-bind="value:firstName"/></p><p>Lastname 查看详情

将状态传递给 React/Redux 中的递归嵌套组件

】将状态传递给React/Redux中的递归嵌套组件【英文标题】：PassstatetorecursivelynestedcomponentinReact/Redux【发布时间】：2016-08-3108:16:02【问题描述】：我有一个组件，它的子组件与组件本身的类型相同。我也可以渲染孩子们，但孩子们... 查看详情

如何使用钩子将 React 类组件转换为功能组件

...hhooks【发布时间】：2021-04-2600:54:39【问题描述】：我正在Reactjs中创建一个降价预览器，用户在textarea标记中输入降价，转换后的降价显示在div标记中。目前，该项目在一个类组件中，我想知道如何将其转换为带有钩子的功能组件... 查看详情