Javascript 在React代码中使用Babel转换

我试图将一个字符串转换为有效的JSX代码，然后将其注入React组件

const babel = require('babel-core')
let result = eval(babel.transform('<p className="greeting">Hello</p>').code)

是的，我知道从字符串创建代码并将其注入是不受欢迎的，但是D3会动态创建元素（即，您不能以声明方式编写它们），例如：轴的值和记号数会根据数据而变化。我已经用成功地将D3轴更改为JSX，但这将返回一个

字符串。我需要将该
字符串
转换为有效的JSX组件，并将其注入到代码中

编辑：正如Michael Lyons在下面所说的，我可以只使用
危险的LysetinerHTML
，但我试图避免使用此选项，除非其他一切都不起作用。尽可能地保持在React范式中

下面是我的组件的渲染方法的外观：

<svg width='100%' height='600'>
  <g transform='translate(50, 50)'>
    <path d='...' className='path-0'></path>
  </g>
  {/* Insert JSX elements here. e.g. axes below */}
  {axes}
</svg>

您可以直接通过React组件呈现HTML，而不是将HTML转换为JSX，然后在客户端的代码中使用babel进行呈现

const babel = require('babel-core')
let result = eval(babel.transform('<p className="greeting">Hello</p>').code)

Facebook的DOM元素实现为此用例内置了功能，您是对的，出于安全原因，人们通常不赞成它，因为它会打开漏洞

Facebook甚至将其标记为“危险的HTML”，以提醒开发者这是危险的

因此，如果您有字符串格式的HTML，您可以在JSX中以如下方式呈现：

getMarkup() {
  return { __html: '<p class="greeting">Hello</p>' }
}
render() {
  return <div dangerouslySetInnerHTML={this.getMarkup()} />;
}

getMarkup（）{
返回{{uuu html:'
Hello
'}
}
render（）{
返回；
}

这直接来自此处的React DOM elements文档：

此方法还应允许您绕过将d3输出转换为JSX的过程

编辑：介绍性语句
这个JSX代码实际上来自哪里？当用户加载页面时，您将尝试编译它，这意味着您试图将整个Babel打包并发送到用户客户端，这很糟糕。您可以使用D3的HTML输出，危险地设置组件中包装器div的内部HTML。检查这个链接：@loganfsmyth-正如我上面所说，JSX代码来自
htmltojsx
，我在D3的输出中。如果有其他方法可以将D3输出传输到有效的JSX，我很想了解它。@MichaelLyons-我曾考虑过使用
危险的HTML
，但我试图避免这种途径，因为至少通过传输到JSX，我仍然有点使用React方法。我曾考虑过使用
危险的LysetinerHTML
，但我试图避免这种途径，因为至少通过传输到JSX，我仍然有点使用React方法。如果没有其他方法真正起作用，那么我将回到
危险的setinenerHTML
getMarkup() {
  return { __html: '<p class="greeting">Hello</p>' }
}
render() {
  return <div dangerouslySetInnerHTML={this.getMarkup()} />;
}