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会动态创建元素（即您无法以声明方式编写它们）例如：轴的值和滴答数根据数据而变化。我已使用htmltojsx成功将D3轴更改为JSX，但返回String。我需要将String转换为可以注入我的代码的有效JSX组件。

编辑：正如Michael Lyons在下面所述，我可以使用dangerouslySetInnerHTML，但我试图避免这个选项，除非其他一切都不起作用。尽量保持在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>

这是我的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元素实现内置了这个用例的功能，而你是对的，出于安全考虑，它通常不赞成，因为它为cross-site scripting带来了漏洞。

Facebook甚至将其标记为“危险地设置内容HTML”和＃34;提醒开发者这是危险的。

因此，如果你有一个字符串格式的HTML，你可以用这样的方式在JSX中呈现它：

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

这直接来自这里的React DOM元素文档：Docs

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

编辑：介绍性句子

在React代码中使用Babel Transform

1 个答案: