我需要在React类中呈现HTML(JSX)字符串.我不知道这是否可能.
dangerouslySetInnerHTML对我无效,因为我在此文件中有不同的反应组件.这不是简单的HTML.
dangerouslySetInnerHTML对我无效,因为我在此文件中有不同的反应组件.这不是简单的HTML.
我有一个预期结果的例子:
https://jsfiddle.net/86rg50re/1/
var MyComponent = React.createClass({ propTypes: { owner: React.PropTypes.string },render: function() { return <div>Congrats {this.props.owner}! you have rendered MyComponent ({this.props.children})</div>; } }); var Hello = React.createClass({ render: function() { return <div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>; } });
但我拥有的是:
var Hello = React.createClass({ render: function() { var content = '<div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>'; return transformStringToJSX(content); }
显然transformStringToJSX不存在.
有没有办法渲染jsx字符串?
解决方法
你可以用babel来改造它
npm install --save babel-core
然后在你的代码中
var babel = require('babel-core'); var Component = eval(babel.transform('<div><MyComponent /></div>').code);
请注意,将字符串转换为可执行代码通常为bad idea.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。