您的位置：首页 > Web前端 > React

Backbone视图渲染React组件

2016-07-24 08:25 453 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="react/react-0.14.7/build/react.js"></script>
<script src="react/react-0.14.7/build/react-dom.js"></script>
<script src="react/browser.min.js"></script>
<script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
<script src="app/scripts/vendor/underscore.js"></script>
<script src="app/scripts/vendor/backbone.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！{this.props.name}</h1>;
}
});

ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

var MyView = Backbone.View.extend({
el: 'body',
template: '<div class="widget-container"></div>',
render: function() {
this.$el.html(this.template);
var HM=React.createFactory(HelloMessage);
ReactDOM.render(new HM({name:'xxxxx'}), this.$('.widget-container').get(0));
// ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0));
//  ReactDOM.render(<HM  name='xiaoxiao'/>), this.$('.widget-container').get(0));
//  ReactDOM.render(<HelloMessage  name='xiaoxiao'/>), this.$('.widget-container').get(0));
return this;
}
});

new MyView().render();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航