閱讀(2.9k) 書簽贊(0) 我要糾錯

Taro 規(guī)范

2020-05-12 17:46 更新

項目組織文件組織形式

以下文件組織規(guī)范為最佳實踐的建議

所有項目源代碼請放在項目根目錄 src 目錄下，項目所需最基本的文件包括 入口文件 以及 頁面文件

入口文件為 app.js
頁面文件建議放置在 src/pages 目錄下

一個可靠的 Taro 項目可以按照如下方式進行組織

├── config                 配置目錄
|   ├── dev.js             開發(fā)時配置
|   ├── index.js           默認配置
|   └── prod.js            打包時配置
├── src                    源碼目錄
|   ├── components         公共組件目錄
|   ├── pages              頁面文件目錄
|   |   ├── index          index 頁面目錄
|   |   |   ├── banner     頁面 index 私有組件
|   |   |   ├── index.js   index 頁面邏輯
|   |   |   └── index.css  index 頁面樣式
|   ├── utils              公共方法庫
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口文件
└── package.json

文件命名

Taro 中普通 JS/TS 文件以小寫字母命名，多個單詞以下劃線連接，例如 util.js、util_helper.js

Taro 組件文件命名遵循 Pascal 命名法，例如 ReservationCard.jsx

文件后綴

Taro 中普通 JS/TS 文件以 .js 或者 .ts 作為文件后綴

Taro 組件則以 .jsx 或者 .tsx 作為文件后綴，當(dāng)然這不是強制約束，只是作為一個實踐的建議，組件文件依然可以以 .js 或者 .ts 作為文件后綴

JavaScript 書寫規(guī)范

在 Taro 中書寫 JavaScript 請遵循以下規(guī)則

基本書寫

使用兩個空格進行縮進

不要混合使用空格與制表符作為縮進

function hello (name) {
  console.log('hi', name)   // ? 正確
    console.log('hello', name)   // ? 錯誤
}

除了縮進，不要使用多個空格

const id =    1234    // ? 錯誤
const id = 1234       // ? 正確

不要在句末使用分號

const a = 'a'   // ? 正確
const a = 'a';  // ? 錯誤

字符串統(tǒng)一使用單引號

console.log('hello there')
// 如果遇到需要轉(zhuǎn)義的情況，請按如下三種寫法書寫
const x = 'hello "world"'
const y = 'hello \'world\''
const z = `hello 'world'`

代碼塊中避免多余留白

if (user) {
                            // ? 錯誤
  const name = getName()
 
}

if (user) {
  const name = getName()    // ? 正確
}

關(guān)鍵字后面加空格

if (condition) { ... }   // ? 正確
if(condition) { ... }    // ? 錯誤

函數(shù)聲明時括號與函數(shù)名間加空格

function name (arg) { ... }   // ? 正確
function name(arg) { ... }    // ? 錯誤

run(function () { ... })      // ? 正確
run(function() { ... })       // ? 錯誤

展開運算符與它的表達式間不要留空白

fn(... args)    // ? 錯誤
fn(...args)     // ? 正確

遇到分號時空格要后留前不留

for (let i = 0 ;i < items.length ;i++) {...}    // ? 錯誤
for (let i = 0; i < items.length; i++) {...}    // ? 正確

代碼塊首尾留空格

if (admin){...}     // ? 錯誤
if (admin) {...}    // ? 正確

圓括號間不留空格

getName( name )     // ? 錯誤
getName(name)       // ? 正確

屬性前面不要加空格

user .name      // ? 錯誤
user.name       // ? 正確

一元運算符前面跟一個空格

typeof!admin        // ? 錯誤
typeof !admin        // ? 正確

注釋首尾留空格

//comment           // ? 錯誤
// comment          // ? 正確

/*comment*/         // ? 錯誤
/* comment */       // ? 正確

模板字符串中變量前后不加空格

const message = `Hello, ${ name }`    // ? 錯誤
const message = `Hello, ${name}`      // ? 正確

逗號后面加空格

// ? 正確
const list = [1, 2, 3, 4]
function greet (name, options) { ... }

// ? 錯誤
const list = [1,2,3,4]
function greet (name,options) { ... }

不允許有連續(xù)多行空行

// ? 正確
const value = 'hello world'
console.log(value)

// ? 錯誤
const value = 'hello world'



console.log(value)

單行代碼塊兩邊加空格

function foo () {return true}    // ? 錯誤
function foo () { return true }  // ? 正確
if (condition) { return true }  // ? 正確

不要使用非法的空白符

function myFunc () /*<NBSP>*/{}   // ? 錯誤

始終將逗號置于行末

const obj = {
  foo: 'foo'
  ,bar: 'bar'   // ? 錯誤
}

const obj = {
  foo: 'foo',
  bar: 'bar'   // ? 正確
}

點號操作符須與屬性需在同一行

console.log('hello')  // ? 正確

console.
  log('hello')  // ? 錯誤

console
  .log('hello') // ? 正確

文件末尾留一空行

函數(shù)調(diào)用時標(biāo)識符與括號間不留間隔

console.log ('hello') // ? 錯誤
console.log('hello')  // ? 正確

鍵值對當(dāng)中冒號與值之間要留空白

const obj = { 'key' : 'value' }    // ? 錯誤
const obj = { 'key' :'value' }     // ? 錯誤
const obj = { 'key':'value' }      // ? 錯誤
const obj = { 'key': 'value' }     // ? 正確

變量定義

使用 const/let 定義變量

當(dāng)前作用域不需要改變的變量使用 const，反之則使用 let

const a = 'a'
a = 'b'   // ? 錯誤，請使用 let 定義

let test = 'test'

var noVar = 'hello, world'   // ? 錯誤，請使用 const/let 定義變量

每個 const/let 關(guān)鍵字單獨聲明一個變量

// ? 正確
const silent = true
let verbose = true

// ? 錯誤
const silent = true, verbose = true

// ? 錯誤
let silent = true,
    verbose = true

不要重復(fù)聲明變量

let name = 'John'
let name = 'Jane'     // ? 錯誤

let name = 'John'
name = 'Jane'         // ? 正確

不要使用 undefined 來初始化變量

let name = undefined    // ? 錯誤

let name
name = 'value'          // ? 正確

對于變量和函數(shù)名統(tǒng)一使用駝峰命名法

function my_function () { }    // ? 錯誤
function myFunction () { }     // ? 正確

const my_var = 'hello'           // ? 錯誤
const myVar = 'hello'            // ? 正確

不要定義未使用的變量

function myFunction () {
  const result = something()   // ? 錯誤
}

避免將變量賦值給自己

name = name   // ? 錯誤

基本類型

不要省去小數(shù)點前面的 0

const discount = .5      // ? 錯誤
const discount = 0.5     // ? 正確

字符串拼接操作符 (Infix operators) 之間要留空格

// ? 正確
const x = 2
const message = 'hello, ' + name + '!'

// ? 錯誤
const x=2
const message = 'hello, '+name+'!'

不要使用多行字符串

const message = 'Hello \
                 world'     // ? 錯誤

檢查 NaN 的正確姿勢是使用 isNaN()

if (price === NaN) { }      // ? 錯誤
if (isNaN(price)) { }       // ? 正確

用合法的字符串跟 typeof 進行比較操作

typeof name === undefined       // ? 錯誤
typeof name === 'undefined'     // ? 正確

對象與數(shù)組

對象中定義了存值器，一定要對應(yīng)的定義取值器

const person = {
  set name (value) {    // ? 錯誤
    this._name = value
  }
}

const person = {
  set name (value) {
    this._name = value
  },
  get name () {         // ? 正確
    return this._name
  }
}

使用數(shù)組字面量而不是構(gòu)造器

const nums = new Array(1, 2, 3)   // ? 錯誤
const nums = [1, 2, 3]            // ? 正確

不要解構(gòu)空值

const { a: {} } = foo         // ? 錯誤
const { a: { b } } = foo      // ? 正確

對象字面量中不要定義重復(fù)的屬性

const user = {
  name: 'Jane Doe',
  name: 'John Doe'    // ? 錯誤
}

不要擴展原生對象

Object.prototype.age = 21     // ? 錯誤

外部變量不要與對象屬性重名

let score = 100
function game () {
  score: while (true) {      // ? 錯誤
    score -= 10
    if (score > 0) continue score
    break
  }
}

對象屬性換行時注意統(tǒng)一代碼風(fēng)格

const user = {
  name: 'Jane Doe', age: 30,
  username: 'jdoe86'            // ? 錯誤
}

const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ? 正確

const user = {
  name: 'Jane Doe',
  age: 30,
  username: 'jdoe86'
}

避免使用不必要的計算值作對象屬性

const user = { ['name']: 'John Doe' }   // ? 錯誤
const user = { name: 'John Doe' }       // ? 正確

函數(shù)

避免使用 arguments.callee 和 arguments.caller

function foo (n) {
  if (n <= 0) return

  arguments.callee(n - 1)   // ? 錯誤
}

function foo (n) {
  if (n <= 0) return

  foo(n - 1)
}

不要定義冗余的函數(shù)參數(shù)

function sum (a, b, a) {  // ? 錯誤
  // ...
}

function sum (a, b, c) {  // ? 正確
  // ...
}

避免多余的函數(shù)上下文綁定

const name = function () {
  getName()
}.bind(user)    // ? 錯誤

const name = function () {
  this.getName()
}.bind(user)    // ? 正確

不要使用 eval()

eval( "var result = user." + propName ) // ? 錯誤
const result = user[propName]             // ? 正確

不要使用多余的括號包裹函數(shù)

const myFunc = (function () { })   // ? 錯誤
const myFunc = function () { }     // ? 正確

避免對聲明過的函數(shù)重新賦值

function myFunc () { }
myFunc = myOtherFunc    // ? 錯誤

注意隱式的 eval()

setTimeout("alert('Hello world')")                   // ? 錯誤
setTimeout(function () { alert('Hello world') })     // ? 正確

嵌套的代碼塊中禁止再定義函數(shù)

if (authenticated) {
  function setAuthUser () {}    // ? 錯誤
}

禁止使用 Function 構(gòu)造器

const sum = new Function('a', 'b', 'return a + b')    // ? 錯誤

禁止使用 Object 構(gòu)造器

let config = new Object()   // ? 錯誤

自調(diào)用匿名函數(shù) (IIFEs) 使用括號包裹

const getName = function () { }()     // ? 錯誤

const getName = (function () { }())   // ? 正確
const getName = (function () { })()   // ? 正確

不使用 Generator 函數(shù)語法

使用 Promise 或者 async functions 來實現(xiàn)異步編程

function* helloWorldGenerator() {     // ? 錯誤
  yield 'hello';
  yield 'world';
  return 'ending';
}

正則

正則中不要使用控制符

const pattern = /\x1f/    // ? 錯誤
const pattern = /\x20/    // ? 正確

正則中避免使用多個空格

const regexp = /test   value/   // ? 錯誤

const regexp = /test {3}value/  // ? 正確
const regexp = /test value/     // ? 正確

類定義

類名要以大寫字母開頭

class animal {}
const dog = new animal()    // ? 錯誤

class Animal {}
const dog = new Animal()    // ? 正確

避免對類名重新賦值

class Dog {}
Dog = 'Fido'    // ? 錯誤

子類的構(gòu)造器中一定要調(diào)用 super

class Dog {
  constructor () {
    super()   // ? 錯誤
  }
}

class Dog extends Mammal {
  constructor () {
    super()   // ? 正確
  }
}

使用 this 前請確保 super() 已調(diào)用

class Dog extends Animal {
  constructor () {
    this.legs = 4     // ? 錯誤
    super()
  }
}

禁止多余的構(gòu)造器

class Car {
  constructor () {      // ? 錯誤
  }
}

class Car {
  constructor () {      // ? 錯誤
    super()
  }
}

類中不要定義冗余的屬性

class Dog {
  bark () {}
  bark () {}    // ? 錯誤
}

無參的構(gòu)造函數(shù)調(diào)用時要帶上括號

function Animal () {}
const dog = new Animal    // ? 錯誤
const dog = new Animal()  // ? 正確

new 創(chuàng)建對象實例后需要賦值給變量

new Character()                     // ? 錯誤
const character = new Character()   // ? 正確

模塊

同一模塊有多個導(dǎo)入時一次性寫完

import { myFunc1 } from 'module'
import { myFunc2 } from 'module'          // ? 錯誤

import { myFunc1, myFunc2 } from 'module' // ? 正確

import, export 和解構(gòu)操作中，禁止賦值到同名變量

import { config as config } from './config'     // ? 錯誤
import { config } from './config'               // ? 正確

語句

避免在 return 語句中出現(xiàn)賦值語句

function sum (a, b) {
  return result = a + b     // ? 錯誤
}

禁止使用 with

with (val) {...}    // ? 錯誤

不要使用標(biāo)簽語句

label:
  while (true) {
    break label     // ? 錯誤
  }

不要隨意更改關(guān)鍵字的值

let undefined = 'value'     // ? 錯誤

return，throw，continue 和 break 后不要再跟代碼

function doSomething () {
  return true
  console.log('never called')     // ? 錯誤
}

邏輯與循環(huán)

始終使用 === 替代 ==

例外： obj == null 可以用來檢查 null || undefined

if (name === 'John')   // ? 正確
if (name == 'John')    // ? 錯誤

if (name !== 'John')   // ? 正確
if (name != 'John')    // ? 錯誤

避免將變量與自己進行比較操作

if (score === score) {}   // ? 錯誤

if/else 關(guān)鍵字要與花括號保持在同一行

// ? 正確
if (condition) {
  // ...
} else {
  // ...
}

// ? 錯誤
if (condition)
{
  // ...
}
else
{
  // ...
}

多行 if 語句的的括號不能省略

// ? 正確
if (options.quiet !== true) console.log('done')

// ? 正確
if (options.quiet !== true) {
  console.log('done')
}

// ? 錯誤
if (options.quiet !== true)
  console.log('done')

對于三元運算符 ? 和 : 與他們所負責(zé)的代碼處于同一行

// ? 正確
const location = env.development ? 'localhost' : 'www.api.com'

// ? 正確
const location = env.development
  ? 'localhost'
  : 'www.api.com'

// ? 錯誤
const location = env.development ?
  'localhost' :
  'www.api.com'

請書寫優(yōu)雅的條件語句（avoid Yoda conditions）

if (42 === age) { }    // ? 錯誤
if (age === 42) { }    // ? 正確

避免使用常量作為條件表達式的條件（循環(huán)語句除外）

if (false) {    // ? 錯誤
  // ...
}

if (x === 0) {  // ? 正確
  // ...
}

while (true) {  // ? 正確
  // ...
}

循環(huán)語句中注意更新循環(huán)變量

for (let i = 0; i < items.length; j++) {...}    // ? 錯誤
for (let i = 0; i < items.length; i++) {...}    // ? 正確

如果有更好的實現(xiàn)，盡量不要使用三元表達式

let score = val ? val : 0     // ? 錯誤
let score = val || 0          // ? 正確

switch 語句中不要定義重復(fù)的 case 分支

switch (id) {
  case 1:
    // ...
  case 1:     // ? 錯誤
}

switch 一定要使用 break 來將條件分支正常中斷

switch (filter) {
  case 1:
    doSomething()    // ? 錯誤
  case 2:
    doSomethingElse()
}

switch (filter) {
  case 1:
    doSomething()
    break           // ? 正確
  case 2:
    doSomethingElse()
}

switch (filter) {
  case 1:
    doSomething()
    // fallthrough  // ? 正確
  case 2:
    doSomethingElse()
}

避免不必要的布爾轉(zhuǎn)換

const result = true
if (!!result) {   // ? 錯誤
  // ...
}

const result = true
if (result) {     // ? 正確
  // ...
}

避免使用逗號操作符

if (doSomething(), !!test) {}   // ? 錯誤

錯誤處理

不要丟掉異常處理中 err 參數(shù)

// ? 正確
run(function (err) {
  if (err) throw err
  window.alert('done')
})

// ? 錯誤
run(function (err) {
  window.alert('done')
})

catch 中不要對錯誤重新賦值

try {
  // ...
} catch (e) {
  e = 'new value'             // ? 錯誤
}

try {
  // ...
} catch (e) {
  const newVal = 'new value'  // ? 正確
}

用 throw 拋錯時，拋出 Error 對象而不是字符串

throw 'error'               // ? 錯誤
throw new Error('error')    // ? 正確

finally 代碼塊中不要再改變程序執(zhí)行流程

try {
  // ...
} catch (e) {
  // ...
} finally {
  return 42     // ? 錯誤
}

使用 Promise 一定要捕捉錯誤

asyncTask('google.com').catch(err => console.log(err))   // ? 正確

組件及 JSX 書寫規(guī)范

基本書寫

組件創(chuàng)建

Taro 中組件以類的形式進行創(chuàng)建，并且單個文件中只能存在單個組件

代碼縮進

使用兩個空格進行縮進，不要混合使用空格與制表符作為縮進

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

class MyComponent extends Component {
  render () {
    return (
      <View className='test'>     // ? 正確
        <Text>12</Text>     // ? 錯誤
      </View>
    )
  }
}

單引號

JSX 屬性均使用單引號

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  render () {
    return (
      <View className='test'>     // ? 正確
        <Text className="test_text">12</Text>     // ? 錯誤
      </View>
    )
  }
}

對齊方式

多個屬性，多行書寫，每個屬性占用一行，標(biāo)簽結(jié)束另起一行

// bad
<Foo superLongParam='bar'
     anotherSuperLongParam='baz' />

// good
<Foo
  superLongParam='bar'
  anotherSuperLongParam='baz'
/>

// 如果組件的屬性可以放在一行就保持在當(dāng)前一行中
<Foo bar='bar' />

// 多行屬性采用縮進
<Foo
  superLongParam='bar'
  anotherSuperLongParam='baz'
>
  <Quux />
</Foo>

空格使用

終始在自閉合標(biāo)簽前面添加一個空格

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

屬性書寫

屬性名稱始終使用駝峰命名法

// bad
<Foo
  UserName='hello'
  phone_number={12345678}
/>

// good
<Foo
  userName='hello'
  phoneNumber={12345678}
/>

JSX 與括號

用括號包裹多行 JSX 標(biāo)簽


// bad
render () {
  return <MyComponent className='long body' foo='bar'>
           <MyChild />
         </MyComponent>
}

// good
render () {
  return (
    <MyComponent className='long body' foo='bar'>
      <MyChild />
    </MyComponent>
  )
}

// good
render () {
  const body = <div>hello</div>
  return <MyComponent>{body}</MyComponent>
}

標(biāo)簽

當(dāng)標(biāo)簽沒有子元素時，始終使用自閉合標(biāo)簽

// bad
<Foo className='stuff'></Foo>

// good
<Foo className='stuff' />

如果控件有多行屬性，關(guān)閉標(biāo)簽要另起一行

// bad
<Foo
  bar='bar'
  baz='baz' />

// good
<Foo
  bar='bar'
  baz='baz'
/>

書寫順序

在 Taro 組件中會包含類靜態(tài)屬性、類屬性、生命周期等的類成員，其書寫順序最好遵循以下約定（順序從上至下）

static 靜態(tài)方法
constructor
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
點擊回調(diào)或者事件回調(diào) 比如 onClickSubmit() 或者 onChangeDescription()
render

通用約束與建議

所有內(nèi)置組件均需要引入后再使用

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

class MyComponent extends Component {
  render () {
    return (
      <View className='test'>     // ? 正確
        <Text>12</Text>     // ? 錯誤
      </View>
    )
  }
}

不要以 class/id/style 作為自定義組件的屬性名

<Hello class='foo' />     // ? 錯誤
<Hello id='foo' />     // ? 錯誤
<Hello style='foo' />     // ? 錯誤

不要使用 HTML 標(biāo)簽

<div className='foo'></div>     // ? 錯誤
<span id='foo' /></span>    // ? 錯誤

不要在調(diào)用 this.setState 時使用 this.state

由于 this.setState 異步的緣故，這樣的做法會導(dǎo)致一些錯誤，可以通過給 this.setState 傳入函數(shù)來避免

this.setState({
  value: this.state.value + 1
})   // ? 錯誤


this.setState(prevState => ({ value: prevState.value + 1 }))    // ? 正確

map 循環(huán)時請給元素加上 key 屬性

list.map(item => {
  return (
    <View className='list_item' key={item.id}>{item.name}</View>
  )
})

盡量避免在 componentDidMount 中調(diào)用 this.setState

因為在 componentDidMount 中調(diào)用 this.setState 會導(dǎo)致觸發(fā)更新

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  state = {
    myTime: 12
  }
  
  componentDidMount () {
    this.setState({     // ? 盡量避免，可以在 componentWillMount 中處理
      name: 1
    })
  }
  
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

不要在 componentWillUpdate/componentDidUpdate/render 中調(diào)用 this.setState

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  state = {
    myTime: 12
  }
  
  componentWillUpdate () {
    this.setState({     // ? 錯誤
      name: 1
    })
  }
  
  componentDidUpdate () {
    this.setState({     // ? 錯誤
      name: 1
    })
  }
  
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state
    this.setState({     // ? 錯誤
      name: 11
    })
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

不要定義沒有用到的 state

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  state = {
    myTime: 12,
    noUsed: true   // ? 沒有用到
  }
  
  render () {
    const { myTime } = this.state
    return (
      <View className='test'>
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}

組件最好定義 defaultProps

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {

  static defaultProps = {
    isEnable: true
  }
  
  state = {
    myTime: 12
  }
  
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state

    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

render 方法必須有返回值

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  state = {
    myTime: 12
  }
  
  render () {   // ? 沒有返回值
    const { isEnable } = this.props
    const { myTime } = this.state

    <View className='test'>
      {isEnable && <Text className="test_text">{myTime}</Text>}
    </View>
  }
}

值為 true 的屬性可以省略書寫值

<Hello personal />
<Hello personal={false} />

JSX 屬性或者表達式書寫時需要注意空格

屬性書寫不帶空格，如果屬性是一個對象，則對象括號旁邊需要帶上空格

<Hello name={ firstname } />   // ? 錯誤
<Hello name={ firstname} />   // ? 錯誤
<Hello name={firstname } />   // ? 錯誤
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />      // ? 正確

事件綁定均以 on 開頭

在 Taro 中所有默認事件如 onClick、onTouchStart 等等，均以 on 開頭

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

class MyComponent extends Component {
  state = {
    myTime: 12
  }

  clickHandler (e) {
    console.log(e)
  }
  
  render () {
    const { myTime } = this.state

    return (
      <View className='test' onClick={this.clickHandler}>    // ? 正確
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}

子組件傳入函數(shù)時屬性名需要以 on 開頭

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'

import Tab from '../../components/Tab/Tab'

class MyComponent extends Component {
  state = {
    myTime: 12
  }

  clickHandler (e) {
    console.log(e)
  }
  
  render () {
    const { myTime } = this.state

    return (
      <View className='test'>
        <Tab onChange={this.clickHandler} />    // ? 正確
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}

Taro 自身限制規(guī)范

不能使用 Array#map 之外的方法操作 JSX 數(shù)組

Taro 在小程序端實際上把 JSX 轉(zhuǎn)換成了字符串模板，而一個原生 JSX 表達式實際上是一個 React/Nerv 元素(react-element)的構(gòu)造器，因此在原生 JSX 中你可以隨意地對一組 React 元素進行操作。但在 Taro 中你只能使用 map 方法，Taro 轉(zhuǎn)換成小程序中 wx:for

以下代碼會被 ESLint 提示警告，同時在 Taro（小程序端）也不會有效：

test.push(<View />)

numbers.forEach(number => {
  if (someCase) {
    a = <View />
  }
})

test.shift(<View />)

components.find(component => {
  return component === <View />
})

components.some(component => component.constructor.__proto__ === <View />.constructor)

以下代碼不會被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運行：

numbers.filter(Boolean).map((number) => {
  const element = <View />
  return <View />
})

解決方案

先處理好需要遍歷的數(shù)組，然后再用處理好的數(shù)組調(diào)用 map 方法。

numbers.filter(isOdd).map((number) => <View />)

for (let index = 0; index < array.length; index++) {
  // do you thing with array
}

const element = array.map(item => {
  return <View />
})

以上內(nèi)容是否對您有幫助：

← 特殊問題的處理

框架 →

寫筆記

我要補充

Taro 規(guī)范

項目組織文件組織形式

文件后綴

JavaScript 書寫規(guī)范

基本書寫

使用兩個空格進行縮進

除了縮進，不要使用多個空格

不要在句末使用分號

字符串統(tǒng)一使用單引號

代碼塊中避免多余留白

關(guān)鍵字后面加空格

函數(shù)聲明時括號與函數(shù)名間加空格

展開運算符與它的表達式間不要留空白

遇到分號時空格要后留前不留

代碼塊首尾留空格

圓括號間不留空格

屬性前面不要加空格

一元運算符前面跟一個空格

注釋首尾留空格

模板字符串中變量前后不加空格

逗號后面加空格

不允許有連續(xù)多行空行

單行代碼塊兩邊加空格

不要使用非法的空白符

始終將逗號置于行末

點號操作符須與屬性需在同一行

文件末尾留一空行

函數(shù)調(diào)用時標(biāo)識符與括號間不留間隔

鍵值對當(dāng)中冒號與值之間要留空白

變量定義

使用 const/let 定義變量

每個 const/let 關(guān)鍵字單獨聲明一個變量

不要重復(fù)聲明變量

不要使用 undefined 來初始化變量

對于變量和函數(shù)名統(tǒng)一使用駝峰命名法

不要定義未使用的變量

避免將變量賦值給自己

基本類型

不要省去小數(shù)點前面的 0

字符串拼接操作符 (Infix operators) 之間要留空格

不要使用多行字符串

檢查 NaN 的正確姿勢是使用 isNaN()

用合法的字符串跟 typeof 進行比較操作

對象與數(shù)組

對象中定義了存值器，一定要對應(yīng)的定義取值器

使用數(shù)組字面量而不是構(gòu)造器

不要解構(gòu)空值

對象字面量中不要定義重復(fù)的屬性

不要擴展原生對象

外部變量不要與對象屬性重名

對象屬性換行時注意統(tǒng)一代碼風(fēng)格

避免使用不必要的計算值作對象屬性

函數(shù)

避免使用 arguments.callee 和 arguments.caller

不要定義冗余的函數(shù)參數(shù)

避免多余的函數(shù)上下文綁定

不要使用 eval()

不要使用多余的括號包裹函數(shù)

避免對聲明過的函數(shù)重新賦值

注意隱式的 eval()

嵌套的代碼塊中禁止再定義函數(shù)

禁止使用 Function 構(gòu)造器

禁止使用 Object 構(gòu)造器

自調(diào)用匿名函數(shù) (IIFEs) 使用括號包裹

不使用 Generator 函數(shù)語法

正則

正則中不要使用控制符

正則中避免使用多個空格

類定義

類名要以大寫字母開頭

避免對類名重新賦值

子類的構(gòu)造器中一定要調(diào)用 super

使用 this 前請確保 super() 已調(diào)用

禁止多余的構(gòu)造器

類中不要定義冗余的屬性

無參的構(gòu)造函數(shù)調(diào)用時要帶上括號

除了縮進，不要使用多個空格

對象中定義了存值器，一定要對應(yīng)的定義取值器