Use Taro for the first time, list the pits encountered, for the subsequent pit for reference.

The development environment

  • Taro version: V1.3.0-bet.5
  • Nodejs version: V8.11.4

Using iron law

  • Static resource 404, check if static resource references are introduced using ES6’s import check if access files are connected to multiple words using underscores
  • Can’t find Js file. Delete dist folder and recompile

The pit of tread

  • 1. Implement the slot function of the applets. The result of the WXML translation by the development tool is that the slot content and components are sibling, rather than nested.
  • 2. Use externalClasses to define an external style for the component.
  • Error using “functional component” in component file
  • 4. After compiling, the static resource image is always 404 and is not copied to the dist directory
  • 5. There was an error in calling the function that generated the functional component
  • 6. The parent component passes a function to the child component via props. After the child component invokes the function, this refers to the props of the child component

1. Implement the slot function of the applets. The result of the WXML translation by the development tool is that the slot content and components are sibling, rather than nested.Children and Groups (originally in English

This is a bug with applets development tools, the last view window is correct, it is correct, github.com/NervJS/taro…

Component code before 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>
Copy the code
// page.js
<MustLoginBtn className='scan-btn' onClick={this.doScan}>
    <View className='scan-btn-inner'>
      <View className='scan-icon' />
      <Text className='btn-text'>Scan small program code</Text>
    </View>
</MustLoginBtn>
Copy the code

The WXML seen in the development tool looks like this:

2. Use externalClasses to define an external style for the component.Component Templates and Styles applet official documentation.External and global styles for components

Use global style classes instead of externalClasses. Set addGlobalClass in the Component file: When using a custom component in the page.js file, set the className property in the page. SCSS style file. External styles also need to be written in the page style file to be valid.

/* CustomComp.js */
export default class CustomComp extends Component {
  // Set the global style
  static options = {
    addGlobalClass: true
  }
  // Use prop to set custom className
  static defaultProps = {
    className: ' '
  }

  render () {
    return <View className={this.props.className}>The color of this text is not determined by the class outside the component</View>}}Copy the code
/* MyPage.js */
import './MyPage.scss';
export default class MyPage extends Component {
  render () {
    return <CustomComp className="red-text" />}}Copy the code
/* MyPage.scss */
.red-text {
  color: red;
}
Copy the code

Error using “functional component” in component file

Function names must begin with render and capitalize the first letter after render. Class function Components (class function Components

  • Error manifestation:

This should not be a pit, it is not deep enough to read the document.

4. After compiling, the static resource image is always 404 and is not copied to the dist directory

To import static resources, use the ES6 import syntax to import Static Resource References

The following import methods are ignored:

<Image className='comp-checkbox__icon-inner' src='./assets/checked_icon.png' />
Copy the code

5. There was an error in calling the function that generated the functional component

Official restrictions: function names must begin with render, function arguments must not be passed to JSX elements or JSX element reference functions cannot recursively call themselves

Although I didn’t call myself, I obviously can’t call any other function that generates a functional component of a class. ComponentA and ComponentB, then introduce ComponentB in ComponentA, and render function in the use of method 2: JSX as far as possible to write in a class function component

Wrong way to write it

class MainPage extends Component {
    renderB () {
        return <View>B</View>
    }
    renderA () {
        return (
            <View>
                {this.renderB()}
            </View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()} ... ) }}Copy the code

TypeError: Property right of Ass ignnent Expression expected node to be of a type[ "Expression"] but  instead got null
Copy the code

Correct term

class MainPage extends Component {
    renderA () {
        return (
            <View>{/* renderB start */}<View>B</View>{/* renderB content end */}</View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()} ... ) }}Copy the code

6. The parent component passes a function to the child component via props. After the child component invokes the function, this refers to the props of the child component

The function that is passed is bound in JSX code

Error code:

// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    this.onTabClick.bind(this); / / bind this
  }
  onTabClick () {
    console.log(this) // This refers to child-props, not to an instance of Parent
  }
  render () {
    return <Child onClick={this.onTabClick}/>} } // Child class Child extends Component { constructor (props) { super(props) this.handleClick.bind(this); // bind this to} handleClick () {... this.props.onClick(); } render () { return ( ...<View onClick={this.handleClick}></View>...). }}Copy the code

This points to the correct code:

// Just change the location of the parent component ontabclick.bind (this)
// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    Modified start * / / *
    // this.onTabClick.bind(this); / / bind this
    Modified end * / / *
  }
  onTabClick () {
    console.log(this) // this points to an instance of Parent
  }
  render () {
    Modified start * / / *
    return <Child onClick={this.onTabClick.bind(this)}/>/* End */}}Copy the code

Reason: have not found out, is learning, please advise

7. Under update…