Html 如何在React中使用JSX呈现字符串

我需要在React类中呈现一个HTML（JSX）字符串。我不知道这是否可能。 危险的LySetinerHTML对我无效，因为我在此文件中有不同的react组件。它不是简单的HTML

我举了一个预期结果的例子：

var MyComponent=React.createClass({
道具类型：{
所有者：React.PropTypes.string
},
render:function（）{
return恭喜{this.props.owner}！您已经呈现了MyComponent（{this.props.children}）；
}
});
var Hello=React.createClass({
render:function（）{
返回标题yayyyyy！；
}
});

但我得到的是：

var Hello = React.createClass({
    render: function() {
        var content = '<div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>';
        return transformStringToJSX(content);
    }

var Hello=React.createClass({
render:function（）{
var content='Header yayyyyyyy！'；
返回transformStringToJSX（内容）；
}

显然transformStringToJSX不存在

---

有没有办法呈现jsx字符串？

您可以使用babel对其进行转换

npm install --save babel-core

然后在代码中

var babel = require('babel-core');
var Component = eval(babel.transform('<div><MyComponent /></div>').code);

var babel=require（'babel-core'）；
var组件=评估（巴别塔变换（“”）.code）；

---

请注意，将字符串转换为可执行代码通常是一个简单的过程。

最上等的答案根本不起作用，跳过了各种关键步骤，也没有解释代码应该放在哪里。我不确定海报是否真的没有运行代码或是什么。无论如何，要真正让它工作，你需要这样做：

npm安装@babel/core

npm安装@babel/preset react

您需要使用babel将JSX转换为可以在服务器端运行clientside的有效javascript

导出异步函数getServerSideProps（）{
const stringToRender=require（'@babel/core'）.transform（'''，{presets:['@babel/preset react']}）；
返回{
道具：{
stringToRender
}
}
}

现在我们需要评估客户端上的字符串：

从“React”导入React；
从“../Component”导入组件；//导入您的组件
导出默认函数页（{stringToRender}）{
const[content，setContent]=useState（null）；
useffect（（）=>{
//有必要在useEffect和window内进行评估，以使React可用。
window.Component=Component；//这使组件在'eval'调用中定义。
设置内容（评估（stringToRender））
}, [])
返回(
{content}
)
}
导出异步函数getServerSideProps（）{
const stringToRender=require（'@babel/core'）.transform（'''，{presets:['@babel/preset react']}）；
返回{
道具：{
stringToRender
}
}
}

---

此代码将实际运行到所需的效果。如果要渲染任何其他组件，则需要在

窗口

对象上单独设置它们，以便在

eval（）时定义这些组件

调用已完成。

您能否将该文件作为JavaScript文件导入，并像其他导入一样引用其中的变量和组件？我想这是我的最后一个选项。我更喜欢另一个选项，因为我只想在该文件中存储JSX内容JSX最终成为JavaScript。我认为您最好的选择是导出一个精简的包装c组件并将其作为JS导入。您是否打算使用此示例：。然后执行生成的JS？我假设您是指编译时未知的jsx文件。如果是这样，您是否可以预编译外部文件而不是将其作为jsx？嗨，ahmohl！它不适用于babel包，您必须使用“babel core”。无论如何，如果我使用“Component”在我的render函数中，它抛出了一个错误。这与我尝试执行的操作类似。但是，如果使用

eval（babel.transform（yourComponentString）.code，则一个包含JSX的整个字符串将取代单个组件

它是有效的。但是，我建议不要做您正试图做的事情，因为将字符串转换为代码是不好的。@chulian请确保您指定了react预设。然而，大多数模板引擎都会对字符串进行求值。

var babel = require('babel-core');
var Component = eval(babel.transform('<div><MyComponent /></div>').code);