React 开发实用小集合（2018.08）

1、不使用bind

使用bind的写法

this.handleclick.bind（this，要传的参数）  
handleclick（传过来的参数，event） {

}

Eslint已经不建议使用，可以使用ES6箭头函数替代

handleclick= (val) => {

}

或者

handleclick(传过来的参数) {
    const _key = 传过来的参数
    const _this = this
    return (event) => {
      const obj = {}
      obj[_key] = event.target.value
      _this.setState(obj)
    }
  }
 onChange={this.handleclick('要传的参数')}

注意：

需要传参数，如果不使用bind例如：

// 传输点击的是哪个用户
  handleUserClick = (userId) => {
    console.log("ddd")
    this.props.onSetCurrentUser(userId)
  }

  render(){
    return (
      

        

          {this.props.users.map(user=>{
            return (
              

                {user.name}
              
            )
          })}
        
        
        新增
      
    )
  }

onClick={this.handleUserClick(user.id)
就会默认执行，因为是循环就会执行n遍，而使用bind的方法是没问题的，所以应该改为同样的箭头函数绑定：

onClick={() => this.handleUserClick(user.id)}

此时加上()=>是返回的this.handleUserClick(user.id)函数，而不会在加载的时候执行一遍

2、报错：SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

在Eslint json里配置

  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true,
      "modules": true
    },
    "sourceType": "module",
    "ecmaVersion": 7
  },

3、Error: Couldn't find preset "env" relative to directory

npm i babel-preset-env

其他报错，例如：stage-2

npm i -D babel-preset-stage-2

4、render

如果有普通标签，就像vue的template需要在外边嵌套一层div

render(){
    return(
      

        
用户列表
        
      
      
    )
  }

5、新项目 npm i出错

不切换源，先试试升级到最新版本

npm install -g npm 

如果已经切换了源，执行还原回来

npm config set registry https://registry.npmjs.org

6、阻止冒泡事件

定义一个函数

    stopPropagation = (e) => {
      e.stopPropagation()
      e.nativeEvent.stopImmediatePropagation()
    }

使用

...
      
 this.stopPropagation(event)}>
      
...

注意：

是否加 this 取决于使用的是有状态组件还是无状态组件

7、添加多个点击事件

var Test = React.createClass({
   onClick(event){
      func1();
      func2();
   },
   render(){
      return (
         Test Link
      );
   }
});

或者

Test Link

ES6

 { func1(); func2();}}>Test Link