React - mvc中发生了缩小的异常

时间:2017-09-18 13:22:56

标签: reactjs model-view-controller babel react-dom

我想在react.js应用程序中添加一些ASP.NET mvc个组件。但react.js有时工作而不工作。我在gulp.js中使用gulp-uglify

我已经尝试设置:dev环境

set NODE_ENV=development

但我仍然在浏览器控制台中收到该错误。 aa

  @* 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')
    );

0 个答案:

没有答案