我正在尝试将字符串转换为有效的 JSX 代码,然后将其注入(inject)到我的 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
是的,我知道从字符串创建代码并注入(inject)它不受欢迎,但 D3 动态创建元素(即您不能以声明方式编写它们)例如:轴的值和数量ticks 根据数据变化。我已经使用 htmltojsx 成功地将 D3 轴更改为 JSX。但这会返回一个 String
。我需要将该 String
转换为我可以注入(inject)到我的代码中的有效 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']
}
}
]
}
}
最佳答案
无需将 HTML 转换为 JSX,然后在客户端使用代码中的 babel 渲染,您可以直接通过 React 组件渲染该 html。
Facebook 的 DOM 元素实现为这个用例内置了功能,你是对的,出于安全原因,它通常不被接受,因为它会打开 cross-site scripting 的漏洞。 .
Facebook 甚至将其标记为“dangerouslySetInnerHTML”以提醒开发者这是危险的。
所以如果你有一个字符串格式的 HTML,你可以用像这样的方式在 JSX 中渲染它:
getMarkup() {
return { __html: '<p class="greeting">Hello</p>' }
}
render() {
return <div dangerouslySetInnerHTML={this.getMarkup()} />;
}
这直接来自此处的 React DOM 元素文档:Docs
此方法还应该允许您绕过必须将 d3 输出转换为 JSX
编辑:介绍句
关于javascript - 在 React 代码中使用 Babel Transform,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43667083/