Question

我在＆＃34;类得到语法错误.ClassList扩展了React.Component {＆＃34;当我在IE中运行我的应用程序。在Chrome中它运行良好，但在IE中没有任何反应似乎工作，我得到第一反应行的语法错误。我错过了一些明显的东西吗某种包裹？

   var React = require('react');
   var PamService = require('../service/pamService');

   class ProductList extends React.Component {
constructor(props) {
    super(props);
    this.state = ({
        products: [],
        filteredProducts: []
    });
    this.getProducts();
}
getProducts() {
    var state = this;
    PamService.getProducts("IDDS_stefan", "en").then(function (result) {
        console.log(result);
        var products = state.setNoImage(result.data);
        state.setState({
            products: products,
            filteredProducts: products
        });
    });
}
setNoImage(products) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].Image === "") {
            products[i].Image =  "test";
        }
    }
    return products;
}
filterProducts(categoryId) {
    console.log("FILTERPRODUCSSMAFFAKKA");
    var products = this.state.products;
    var filteredProducts = [];
    for (var i = 0; i < products.length; i++) {
        if (products[i].CategoryId.toLowerCase() === categoryId.toLowerCase()) {
            filteredProducts.push(products[i]);
        }
    }
    this.setState({ filteredProducts: filteredProducts });
}
searchProducts(searchText) {
    var filteredProducts = this.state.products;
    var searchedProducts = [];
    for (var i = 0; i < filteredProducts.length; i++) {
        if (filteredProducts[i].Name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
            searchedProducts.push(filteredProducts[i]);
        } else if (filteredProducts[i].ShortDescription.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
            searchedProducts.push(filteredProducts[i]);
        } else if (filteredProducts[i].ProductId.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
            searchedProducts.push(filteredProducts[i]);
        }
    }
    this.setState({ filteredProducts: searchedProducts });
}
resetProducts() {
    var products = this.state.products;
    this.setState({
        filteredProducts: products
    });
}
render() {
    return (<div className="product-container">
                    <div className="product-list" >
                        <div className="product-list-header">
                            <div>&nbsp;</div>
                            <div>Art.No</div>
                            <div>Name</div>
                            <div>Description</div>
                            <div>Unit</div>
                            <div>Remark</div>
                            <div>Info</div>
                            <div>Stock</div>
                            <div>Price (EUR)</div>
                            <div>Quantity</div>
                            <div id="refresh-product-list" onClick={() => this.resetProducts()}>
                                <i className="fa fa-refresh" aria-hidden="true"></i>
                            </div>
                        </div>
                    {
                        this.state.filteredProducts.map((product) => {
                            return <div className="product-list-item" key={product.ProductId}>
                                <div>
                                    <img src={'data:image/png;base64,' + product.Image} className="product-image"></img>
                                </div>
                                <div>{product.ProductId}</div>
                                <div>{product.Name}</div>
                                <div>{product.ShortDescription} </div>
                                <div>Needed?</div>
                                <div>Needed?</div>
                                <div>Needed?</div>
                                <div>Where to get?</div>
                                <div>1</div>
                                <div></div>
                            </div>
                        })
                    }
                </div>
            </div>)
}
};

 module.exports = ProductList;

Answer 1

您是否正在使用babel来转换您的es6代码？查看示例https://github.com/facebookincubator/create-react-app的create-react-app。

Answer 2

请记住，chrome和firefox将支持ES6的大部分功能或它出现的javascript版本。但Edge和IE不支持此类功能。为了让你在那些浏览器中运行Javascript ES6，你需要将代码转换或转换为本机javascript ..因为你可以使用babel，这是一个很好的帮手。

Answer 3

您可以使用：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

在index.html的头部告诉IE运行兼容模式

在IE上运行React app的语法错误

3 个答案: