基本书写

组件创建

Taro 中组件以类的形式进行创建，并且单个文件中只能存在单个组件

代码缩进

使用两个空格进行缩进，不要混合使用空格与制表符作为缩进

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   render () {
  6.     return (
  7.       <View className='test'>     // ✓ 正确
  8.         <Text>12</Text>     // ✗ 错误
  9.       </View>
  10.     )
  11.   }
  12. }

单引号

JSX 属性均使用单引号

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   render () {
  6.     return (
  7.       <View className='test'>     // ✓ 正确
  8.         <Text className="test_text">12</Text>     // ✗ 错误
  9.       </View>
  10.     )
  11.   }
  12. }

对齐方式

多个属性，多行书写，每个属性占用一行，标签结束另起一行

  1. // bad
  2. <Foo superLongParam='bar'
  3.      anotherSuperLongParam='baz' />
  5. // good
  6. <Foo
  7.   superLongParam='bar'
  8.   anotherSuperLongParam='baz'
  9. />
  11. // 如果组件的属性可以放在一行就保持在当前一行中
  12. <Foo bar='bar' />
  14. // 多行属性采用缩进
  15. <Foo
  16.   superLongParam='bar'
  17.   anotherSuperLongParam='baz'
  18. >
  19.   <Quux />
  20. </Foo>

空格使用

终始在自闭合标签前面添加一个空格

  1. // bad
  2. <Foo/>
  4. // very bad
  5. <Foo                 />
  7. // bad
  8. <Foo
  9.  />
  11. // good
  12. <Foo />

属性书写

属性名称始终使用驼峰命名法

  1. // bad
  2. <Foo
  3.   UserName='hello'
  4.   phone_number={12345678}
  5. />
  7. // good
  8. <Foo
  9.   userName='hello'
  10.   phoneNumber={12345678}
  11. />

JSX 与括号

用括号包裹多行 JSX 标签

  2. // bad
  3. render () {
  4.   return <MyComponent className='long body' foo='bar'>
  5.            <MyChild />
  6.          </MyComponent>
  7. }
  9. // good
  10. render () {
  11.   return (
  12.     <MyComponent className='long body' foo='bar'>
  13.       <MyChild />
  14.     </MyComponent>
  15.   );
  16. }
  18. // good
  19. render () {
  20.   const body = <div>hello</div>
  21.   return <MyComponent>{body}</MyComponent>
  22. }

标签

当标签没有子元素时，始终时候自闭合标签

  1. // bad
  2. <Foo className='stuff'></Foo>
  4. // good
  5. <Foo className='stuff' />

如果控件有多行属性，关闭标签要另起一行

  1. // bad
  2. <Foo
  3.   bar='bar'
  4.   baz='baz' />
  6. // good
  7. <Foo
  8.   bar='bar'
  9.   baz='baz'
  10. />

书写顺序

在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下）

  1. static 静态方法
  2. constructor
  3. componentWillMount
  4. componentDidMount
  5. componentWillReceiveProps
  6. shouldComponentUpdate
  7. componentWillUpdate
  8. componentDidUpdate
  9. componentWillUnmount
  10. 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
  11. render