当前位置:首页 » 其他

webpack+react问题汇总

2015-09-21 16:56 本站整理 浏览(12)

1. classfor这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用className和htmlFor。2. 在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-前缀

3. 单标签需要封闭,如<img>要写成<img/>

【"JSX elements must be wrapped in an enclosing tag" 错误】JSX语法规定,JSX必须要用一个enclosing tag包起来,注意,是一个,而且必须有闭合,比如<img />。

比如:

<div>

...这里写HTML语法

</div>

下面是错误的,因为是两个<div>了:

<div>123</div>

<div>234</div>

【想要把一些公共的JS放到modules文件夹外,供其他项目使用,但babel-loader只能对modules文件夹里的有效】配置webpack.config.js的module.loaders时,添加exclude,如:

module: {
        loaders: [
            {
                test: /\.js$/, loader: 'babel-loader',
                exclude: /(node_modules|bower_components|ppaweb\\libs\\webpack)/
            },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
        ]
    }
【JSX里,不能用if-else语句】

因为JSX只是语法调用和对象创建的语法糖,不能使用if-else等语句,需要改成三元运算符。

【JSX里style值是对象】

<div className="detail-header" style={{background: "#fff", "padding-top": 146, "padding-bottom": 5}}>