我想在react.js
应用程序中添加一些ASP.NET mvc
个组件。但react.js有时工作而不工作。我在gulp.js中使用gulp-uglify
我已经尝试设置:dev环境
set NODE_ENV=development
@* React Library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
@* JSX parser library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/dom.jsx" type="text/babel"></script>
dom.jsx
var object;
var $item_url = "/item/";
var $c_url = "/category/";
var TemplateGrid = React.createClass({
render: function() {
return (
<div className="product-item column">
<span className="pin featured">Featured</span>
<div className="product-preview-actions">
<figure className="product-preview-image">
<img src="assets/images/items/flat_m.jpg" alt="product-image" />
</figure>
<div className="preview-actions">
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny primary">
<span className="icon-tag" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Go to Item</p>
</a>
</div>
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny secondary">
<span className="icon-heart" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Favourites +</p>
</a>
</div>
</div>
</div>
<div className="product-info">
<a href={$item_url + this.props.item.ProductId + "/" + (this.props.item.name).replace(/\s/g, "_")}>
<p className="text-header">{this.props.item.name}</p>
</a>
<p className="product-description"></p>
<a href={$c_url + this.props.item.Category}>
<p className="category primary">{this.props.item.Category}</p>
</a>
<p className="price"><span>$</span>12</p>
</div>
</div>
);
}
});
var Widgets = React.createClass({
getInitialState: function(){
return {
items: []
}
},
componentDidMount:function(){
$.get(this.props.dataUrl, function (data) {
object = data;
if(this.isMounted()){
this.setState({
items: data.tumb
});
}
}.bind(this));
},
componentDidUpdate: function () {
$(".slide-control.left,.slide-control.right").append('<svg class="svg-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg>');
setTimeout(function () {
$('.owl-carousel').owlCarousel('refresh');
}, 1000);
},
render : function(){
var rows = [];
var left = [];
var right = [];
this.state.items.forEach(function (item) {
var i=0;
var o = object.objects[i]; i++;
document.getElementById('Thumb-title').innerText = o.name;
rows.push(<TemplateGrid key={item.ProductId} item={item} />);
});
return (
<div className="product-showcase">
<div className="headline primary">
<h4 id="Thumb-title" />
<div className="slide-control-wrap">
<div className="slide-control left">
</div>
<div className="slide-control right">
</div>
</div>
</div>
<div id="pl-1" className="product-list grid column4-wrap owl-carousel">
{rows}
</div>
</div>
);}
});
ReactDOM.render(
<Widgets dataUrl="/thumb/8/1" />,
document.getElementsByClassName('w1')
);