![](/img/trans.png)
[英]React.js dangerouslySetInnerHTML causing [object Error] {}
[英]React dangerouslySetInnerHTML printing out '[object Object]'
我有我的元素:
dangerouslySetInnerHTML: { __html: this.props.html.map(React.renderToStaticMarkup).join('') }
this.props.html
是一个 React 元素数组(由这个方法构建):
makeOutput(model) {
return <Key model={model} />;
}
当我在断点中运行上面的代码时,我得到:
> this.props.html.map(React.renderToStaticMarkup).join('')
> "<span>b</span>"
但是,当元素输出到 DOM 时,显示的只是[object Object]
。 这有什么原因吗?
这个例子表明该技术没有问题:
function makeOutput(text) {
return <Wrapper text={text} />;
}
var Wrapper = React.createClass({
render() {
return <div>Wrapping: {this.props.text}</div>
}
});
var App = React.createClass({
render() {
var items = [
makeOutput("one"),
makeOutput("two"),
makeOutput("three")
];
return (
<div dangerouslySetInnerHTML={{__html: items.map(React.renderToStaticMarkup).join("") }} />
);
}
});
React.render(<App />, document.getElementById("container"));
问题一定出在一些你还没有透露的代码上。
尝试将您的 HTML 转换为字符串类型
// before
const content = <p>Hello</p>
// after update
const content = `<p>Hello</p>`
// implementation
<div dangerouslySetInnerHTML={{ __html: content }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.