react技巧学习

1、当jsx中有多重判断的时候，可以使用一下的方法：　

(() => {
    if(a) {
        if(b) {
            return 1;
        }else {
            return 2;
        }
    }else {
        return 3;
    }
})()

也可以使用拆分子组件:

const  TestComponent = (a, b) => {
    if(a) {
        if(b) {
            return 1;
        }else {
            return 2;
        }
    }else {
        return 3;
    }
}
const conditions = [true, true]

调用：
<TestComponent {...conditions} />

2、静态图片引入

　　在页面上要引入静态图片的话，需要通过require来进行引入

<img  src={require("../a.jpg")} />

3、ref

　　在页面中，使用ref来获取该元素

<input placeholder="修改名字" ref={(myName)=>this.myName = myName} />

　　之后获取该元素可以直接通过： this.myName 取得该元素

4、如果使用了scss,那么webpack.config.dev.js和webpack.config.prod.js都要做相关的配置

{
    test: /.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
},

以及exclude中添加/.scss$/,

react技巧 学习

相关推荐