Taro development program using small step on pit summary

The first time you use Taro, the pit encountered list again, to the subsequent step on the pit's it for reference.

Development environment

• taro printed books: v1.3.0-beta.5
• nodejs version: v8.11.4

Stepped pit

• 1. To achieve applet slot function, wxml translation is the result of development tools and components are at the same level slot content, rather than nested relationship.
• 2. externalClasses, external style defined for the component failure.
• 3. "functional component" in the component file error

1. To achieve applet slot function, wxml translation is the result of development tools and components are at the same level slot content, rather than nested relationship. "Children with a combination of" Taro official documents

This bug is a small program development tools, and finally view window display is correct, is actually correct , github.com/NervJS/taro...

Component code prior to compilation

// component.js
<View className={'must-login-btn ' + className} hoverClass='btn-hover' onClick={this.onClick}>
{
  !userToken
  ? <Button className='user-info-btn' openType='getUserInfo' onGetuserinfo={handleGetUserInfo} />
  : ''
}
{ this.props.children }
</View>
复制代码

// page.js
<MustLoginBtn className='scan-btn' onClick={this.doScan}>
    <View className='scan-btn-inner'>
      <View className='scan-icon' />
      <Text className='btn-text'>扫小程序码</Text>
    </View>
</MustLoginBtn>
复制代码

Development tools see wxml as follows:

2. externalClasses, external style defined for the component failure. "Component templates and styles" applets official documents , "global style external style and components" Taro official documents

Use global style class, renounce the use of externalClasses .
Component disposed within the file addGlobalClass: true, while using props acquired externally defined className
in the custom file page.js modular set classNameproperty
disposed outside style style file page.scss

/* CustomComp.js */
export default class CustomComp extends Component {
  // 设置全局样式
  static options = {
    addGlobalClass: true
  }
  // 使用prop设置自定义className
  static defaultProps = {
    className: ''
  }

  render () {
    return <View className={this.props.className}>这段文本的颜色不会由组件外的 class 决定</View>
  }
}
复制代码

/* MyPage.js */
import './MyPage.scss';
export default class MyPage extends Component {
  render () {
    return <CustomComp className="red-text" />
  }
}
复制代码

/* MyPage.scss */
.red-text {
  color: red;
}
复制代码

3. "functional component" in the component file error

Naming function must begin with render, the first letter capitalized after the render. "Class function components" Taro official documents

• Error performance:

This should not be regarded as the pit is deep enough to read the document.

4. Update ......

Reproduced in: https: //juejin.im/post/5cf63166f265da1bd6059104