是否可以从字符串中动态呈现React组件?
基本上我有页面'来自数据库的内容,我希望在内容中包含React组件。我想要实现的一个例子:
var html_string = '<i>React Component Rendered</i>: <Hello name="World" />';
var Hello = React.createClass({
render: function() {
return <strong>Hello {this.props.name}</strong>;
}
});
function createMarkup() { return {__html: html_string}; };
var App = React.createClass({
render: function() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
});
ReactDOM.render(
<App/>,
document.getElementById('container')
);
但它只是渲染HTML而不评估<Hello/>
:
<div><i>React Component Rendered</i>: <hello name="World"></hello></div>
我试图获得:
<div><i>React Component Rendered</i>: <strong>Hello World</strong></div>
这个关于JSfiddle的例子:https://jsfiddle.net/26czprne/
答案 0 :(得分:2)
正如thangngoc89所说,没有办法做到这一点。至少没有简单的方法。
JSX被转换为javascript,它只在语法上看起来像xml。
这样:
var x = <div> <i>React Component Rendered</i>: <Hello name="World" /> </div>;
映射到:
var x = React.createElement(
"div",
null,
" ",
React.createElement(
"i",
null,
"React Component Rendered"
),
": ",
React.createElement(Hello, { name: "World" }),
);
更好的策略可能是解析数据库元素,然后使用react动态呈现db查询的结果(这也会促进更松散的耦合)。
答案 1 :(得分:1)
对于派对这个人来说可能有点晚了,但发现自己需要做的与此略有相似,在搜索网页后,我发现这实际上在技术上是可行的(除了安全问题) - 添加了一个很好的小反应包:
https://github.com/TroyAlford/react-jsx-parser
import React, { Component } from 'react'
import JsxParser from 'react-jsx-parser'
class InjectableComponent extends Component {
// ... inner workings of InjectableComponent
}
class MyComponent extends Component {
render() {
/* Pull out parent props which shouldn't be bound,
then pass the rest as `bindings` to all children */
const { prop1, prop2, ...bindings } = this.props
return (
<JsxParser
bindings={bindings}
components={{ InjectableComponent }}
jsx={'\
<h1>Header</h1>\
<InjectableComponent />\
'}
/>
)
}
}
归功于TroyAlford!
答案 2 :(得分:0)
你问的是不可能的。 React将转储您通过dangerouslySetInnerHTML
提供的字符串。它不会评估其中的任何内容。