Reactjs 如何将字符串转换为jsx？

如何获取字符串并将其转换为

jsx

？例如，如果我从

textarea

引入一个字符串，如何将其转换为

React

元素

var jsxString = document.getElementById('textarea').value;

---

我将使用什么过程在客户端上转换此文件？有可能吗？

您需要使用带预设的巴别塔

将以下行添加到

.babelrc

文件中：

{
  "presets": ["react"]
}

然后跑

./node_modules/.bin/babel script.js --out-file script-compiled.js

如果你考虑字符串

，你可以找到更多的信息

。

<div>Hello World</div>

免责声明：该库无意编译为React。它主要与

defaultNamespace:“DOM”一起使用，

使用它编译成普通的JavaScript+DOM表示。尝试任何比简单标记更复杂的操作都可能导致错误

---

重要的是要注意，React不是JSX唯一可能的输出格式

我一直在使用html做出一些成功的反应（虽然自动关闭标记会导致问题，但在pull请求中有一个修复…）将标记字符串解析为类似DOM的对象，然后再对元素进行反应。这并不漂亮，如果你能避免的话，就这么做吧。但它完成了任务

---

HTML在GITHUB中作出反应：

< P>可以考虑使用Engy属性<代码> DaveReStudiNeNeldHML/COD>：

class YourComponent{
  render() {
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'
     
    return (
      <div className="Container" dangerouslySetInnerHTML={{__html: someHtml}}></div>
    )
  }
}

class组件{
render（）{
someHtml='blablabla另一个blabla
'
返回(
)
}
}

我最近遇到了这个答案，这对我来说是一笔不错的交易。您不需要提供字符串。返回JSX元素数组就可以了

我们可以在JavaScript数组中存储JSX元素

let arrUsers = [<li>Steve</li>,<li>Bob</li>,<li>Michael</li>];

让用户=[
史蒂夫
，
鲍勃
，
迈克尔
；

在HTML（JSX）中，将其绑定为

<ul>{arrUsers}</ul>

{arrcusers}

---

就这么简单。

就我个人而言，我喜欢这样做，就像前面的回答一样，建议在JSX中使用

危险的HTML

属性

作为替代，现在有一个名为react html parser的库。您可以检查它并从NPM注册表安装到以下URL:。今天该软件包的每周下载统计数据为23696。看起来是一个很受欢迎的图书馆。即使它看起来更方便使用，我自己，在真正使用它之前还需要更多的阅读和进一步的考虑

从NPM页面复制的代码段：

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

从“React”导入React；
从“react html parser”导入react HtmlParser、{processNodes，convertNodeToElement，htmlparser2}；
类HtmlComponent扩展了React.Component{
render（）{
常量html='示例html字符串'；
返回{ReactHtmlParser（html）}；
}
}

这里有一个小实用程序组件：

const RawHtml = ({ children="", tag: Tag = 'div', ...props }) =>
  <Tag { ...props } dangerouslySetInnerHTML={{ __html: children }}/>;

constrawhtml=（{children=”“，tag:tag='div'，…props}）=>
;

示例用法：

<RawHtml tag={'span'} style={{'font-weight':'bold'}}>
  {"Lorem<br/>ipsum"}
</RawHtml>

{“Lorem
ipsum”}

以下是如何做到这一点，而无需使用危险的HTML

从“React”导入React；
让getNodes=str=>
新建DOMParser（）.parseFromString（str，“text/html”）.body.childNodes；
让createJSX=nodeArray=>{
const className=noderray[0]。className；
返回noderray.map（节点=>{
设attributeObj={}；
常数{
属性，
localName，
子节点，
节点值
}=节点；
如果（属性）{
Array.from（attributes）.forEach（attribute=>{
如果（attribute.name==“style”）{
让styleAttributes=attribute.nodeValue.split（“；”）；
设styleObj={}；
styleAttributes.forEach（属性=>{
let[key，value]=attribute.split（“：”）；
styleObj[key]=值；
});
attributeObj[attribute.name]=styleObj；
}否则{
attributeObj[attribute.name]=attribute.nodeValue；
}
});
}
返回localName？
React.createElement(
localName，
属性bj，
childNodes&&Array.isArray（Array.from（childNodes））？
createJSX（Array.from（childNodes））：
[]
) :
无价值；
});
};
export const StringToJSX=props=>{
返回createJSX（Array.from（getNodes（props.domString））；
};所以没有办法动态执行。我必须从命令行运行一些东西才能做到这一点？我希望能够将字符串输入到
文本区域中，并在页面上呈现。不，这只是为了演示，您可以访问并查看许多工具的实现，如gulp或Grunty。您可以执行
require（“babel core”）。transform（“您的代码”）
能否提供一个要转换为JSX的示例字符串？
Hello World
您的示例字符串只是纯HTML。如果您只想注入HTML，那么
危险的是，HTML
是一种方法。如果你愿意，我可以用更详细的答案来充实它。@DavidL.Walsh它是HTML，但它也是有效的JSX库现在的位置正是我想要的。比我认为的
dangerouslysetinerHTML
选项好得多。它做的事情与
dangerouslysetinerHTML
相同。没有用，这一年是2020年。要签出的活动Github repo是：如果呈现React组件，则此操作不起作用
看不到您的帖子添加您的帖子
在这种情况下，
未按应呈现的方式呈现
危险的HTML
不允许在标记中使用驼峰大小写名称，它会将它们转换为小写。这是因为它是用于html标记的。警告：
DangerouslySetinerHTML
易受XSS攻击。您在这里看到的：
Hello World
不是字符串。但是你说它是JSX是对的。这：
“Hello World”
是一个字符串，不是JSX。没有所谓的“JSX字符串”。小心你的答案，因为这可能会让人困惑。如果内容是动态的，这会起作用，如果标签名itslef是动态的呢？不知道为什么这没有最多的投票权。。好极了我将此用于svg的
const RawHtml = ({ children="", tag: Tag = 'div', ...props }) =>
  <Tag { ...props } dangerouslySetInnerHTML={{ __html: children }}/>;

<RawHtml tag={'span'} style={{'font-weight':'bold'}}>
  {"Lorem<br/>ipsum"}
</RawHtml>