使用React代码内部的Babel变换

Question

我正在尝试将字符串转换为有效的JSX代码，然后将其注入我的React组件。

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

但是，我想在浏览器中使用babel的墙壁撞击：

ERROR in ./~/babel-core/lib/api/node.js
Module not found: Error: Can't resolve 'fs' in '/Users/ben/Desktop/Work/code/ru-coding-challege/node_modules/babel-core/lib/api'
 @ ./~/babel-core/lib/api/node.js 72:10-23
 @ ./~/babel-core/index.js
 @ ./src/js/containers/app-container.js
 @ ./src/js/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/js/index.js
...more similar errors

是的，我知道从字符串中创建代码并注入> ，但是D3动态创建元素(即您不能用声明性地编写它们(：例如：轴的值和数量，其值和数量的值和数量。根据数据更改刻度。我已经成功地将D3轴通过HTMLTOJSX将D3轴更改为JSX，但这返回了String。我需要将String变成可以注入我的代码的有效JSX组件。

编辑：正如迈克尔·里昂(Michael Lyons(在下面指出的那样，我可以使用dangerouslySetInnerHTML，但是除非其他一切都无法使用，否则我会尝试避免使用此选项。试图尽可能留在反应范式中。

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

<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>

这是我的webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  devServer: {
    inline: true,
    contentBase: path.join(__dirname, 'dist'),
    port: 3000
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/html/index.html' }
    ]),
    new webpack.DefinePlugin({
      IN_BROWSER: true,
    }),
  ],
  module: {
    loaders: [
      {
        test: /.scss$/,
        exclude: /(node_modules)/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

Answer 1

，而不是将html转换为JSX，然后在客户端上与代码中的babel渲染，您可以直接通过React组件渲染HTML。

Facebook的DOM元素实现已为此用例中内置功能，并且您的正确原因通常是出于安全原因而皱眉，因为它打开了跨站点脚本的漏洞。

Facebook甚至将其标记为" dangesslysetinnerhtml"，以提醒开发人员这很危险。

因此，如果您的HTML的字符串格式，可以以这样的方式在JSX中渲染：

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

这直接来自React Dom Elements文档：docs

此方法还应允许您绕过必须将D3输出转换为JSX

编辑：介绍性句子