随笔记录

  • 报错
    1
    Absolute imports should come before relative imports

组件引用顺序不正常，应该先引用相对路径组件，再引入本地自定义组件

  • 字符串链接，尽量不要再使用 + ，正确写法是

    1
    `string1-${string2}`  =>  结果是：string1-string2

  • 对数组使用map循环时，内部的匿名函数应该使用箭头函数，否则内部使用this.操作时，会出现undefind，这是因为箭头函数，本身不具有this,而是总指向它的父级，如果父级为匿名，则还会一直向上，直到找到为止。

  • 对数组使用map循环时，匿名函数内部如果只是渲染dom，而无其它组件，则需要省略｛｝，可以理解为在react会将｛｝内的内部当作表达式，进行计算，而不进行渲染（也可以不省略，需要在添加return语句）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    data.map(name =>
    	<div className={ name.label === this.state.result
    	  ? 'cur-select' : '' } key={name.value} onClick={() => { this.selectClick(name.value, name.label); }} >
    	  {name.label}
    	  <span className="icon icon-selected"></span>
    	</div>
     )
    或者：
    data.map((item, index) => {
        const groupItem = Object.assign({
          desc: item.description,
          price: item.price
        });
        return <ProdItem {...groupItem} key={index} />;
     })

  • “XXX” is missing in props validation 解决办法：
    在.eslintrc文件中添加：

    1
    2
    "react/prop-types": 0,
    "react/forbid-prop-types": 0,

  • JSX中三元表达式语句，每个条件的返回只能有一个根dom：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      this.props.prodDing === '1'
        ?
        <div>
          <span>{this.props.stockName}</span><span>{this.props.stockCode}</span>
        </div>
        :
        <div className="empty-list">
          <span className="icon icon-error"></span>
          <span>请先订阅！</span>
        </div>
    }

每个条件的值，都必须包裹在一个根dom中。

  • react的render()函数的return中，尽量不要写过多的业务逻辑，应该放在return之前，通过变量或者函数处理，例如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    let listHtml = '';
    switch (this.props.curList) {
      case 'month_revenue_rate':
        listHtml = <div><span>月收益率</span><span className={eleClass(this.props.month_income)}>{relVal(this.props.month_income)}</span></div>;
        break;
      case 'week_revenue_rate':
        listHtml = <div><span>周收益率</span><span className={eleClass(this.props.week_income)}>{relVal(this.props.week_income)}</span></div>;
        break;
      default:
        listHtml = <div><span>总收益率</span><span className={eleClass(this.props.total_income)}>{relVal(this.props.total_income)}</span></div>;
        break;
    }
    render(){
      reutrn (
        <div>{listHtml}</div>
      )
    }

在html中，直接使用｛listHtml｝即可。
需要注意的是函数的返回或者变量(listHtml)中只能有一个根dom。

  • 使用ref报下面的错误
    1
    2
    Using this.refs is deprecated
    Using string literals in ref attributes is deprecated

解决办法：
修改定义ref，和使用的地方
原来：

1
2
3
4
html:
<div ref="testDiv" />
js:
const div = this.refs.testDiv;

修改为：

1
2
3
4
html:
<div ref={(v) => { this.testDiv = v; }} />
js:
const div = this.testDiv;

原因是：官方已将ref的（推荐）使用方式由string调用，修改为回调函数的形式 。

赏

本文地址： http://wsdever.github.io/2018/01/03/20180118/