taro Pit notes -props transfer jsx

Multiport development framework, taro, Pit Point:

1. The internal components rendering jsx, must begin with render, such as: renderTitle

class MinePage extends Component {

  // good
  renderLeft () {
    return (
      <Text>left</Text>
    )
  }

  // bad
  right () {
    return (
      <Text>right</Text>
    )
  }

  render () {
    return (
      <View>
        <View>{ this.renderLeft() }</View>
        <View>content</View>
        <View>{ this.right() }</View>
      </View>
    )
  }
}

export default MinePage

Perhaps the experience like this is not very deep, can run, but when the component is passed jsx will explode, such as the following simple example of functional components LpInput, it receives around each input parameter left, right, parent component may pass string, jsx and so on:

import Taro, {useState} from '@tarojs/taro'
import {View, Text, Input} from '@tarojs/components'
import './index.css'

const LpInput = props => {
  const {placeholder = '请输入'} = props
  console.log(props)

  return (
    <View className='lp-input'>
      <View className='left'>
        { props.left } // 此处没有写 renderLeft
      </View>
      <View className='middle'>
        <Input placeholder={ placeholder } placeholderClass='placeholder-style'/>
      </View>
      <View className='right'>
        { props.right } // 此处没有写 renderRight
      </View>
    </View>
  )
}

export default LpInput

transfer:

<LpInput left='leftText' right=(<Text>rightText</Text>) />

When the parent component passes jsx, taro will throw an exception:

ReferenceError: React is not defined
或
thirdScriptError React is not defined;

Must begin with render: renderLeft, renderRight

Props.children 2. Do not carry out any operation, such as deconstruction: const {children} = props, the following example LpInput

const LpInput = props => {
  const {placeholder = '请输入', renderRight} = props 
  // renderRight，es6解构，错误操作


  return (
    <View className='lp-input'>
      <View className='left'>
        { props.renderleft } // good, 此处没有做任何操作
      </View>
      <View className='middle'>
        <Input placeholder={ placeholder } placeholderClass='placeholder-style'/>
      </View>
      <View className='right'>
        { renderRight } // bad，使用解构的 renderRight
      </View>
    </View>
  )
}

The reason given by the official website:
Please do not this.props.children anything. Taro achieve this function used in the applet is a small program functions slot, which means you can put this.props.children understood as syntactic sugar slot of, this.props.children ReactElement object of Taro in not React, Thus the form this.props.children && this.props.children, this.props.children [0] is illegal in the Taro.
this.props.children can not set a default content with defaultProps. Due to limitations of the applet, Taro can not know whether the consumer component of the incoming content, so I can not use the default content.
This.props.children can not be decomposed into variables before use. Because ordinary props have a precise value, so when you break them down into run-time variables can be processed, this.props.children you can not operate this way, you have to explicitly write the this.props.children all in order to achieve complete its function.