taro pit-render jsx and transfer jsx

Multi-end development framework, taro, pit:

1. Rendering jsx within a component begins with render, such as renderTitle


class MineSettings 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 MineSettings 

This may not be very profound and can run, but when the component passes jsx, it will explode. For example, the following functional component LpInput, which receives a parameter left, right around the input, and the 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 = 'Please enter'} = props
  console.log(props)

  return (
    <View className='lp-input'>
      <View className='left'>
        { props.left } // renderLeft is not written here
      </View>
      <View className='middle'>
        <Input placeholder={ placeholder } placeholderClass='placeholder-style'/>
      </View>
      <View className='right'>
        { props.right } // renderRight is not written here
      </View>
    </View>
  )
}

export default LpInput

Call:

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

When the parent component passes jsx, taro throws an exception:

ReferenceError: React is not defined
//or
thirdScriptError React is not defined;

Must start with render: renderLeft, renderRight

2. Don't do anything about props.children, such as deconstruction: const {children} = props, following the previous example LpInput

const LpInput = props => {
  const {placeholder = 'Please enter', renderRight} = props // renderRight, es6 deconstruction, error operation


  return (
    <View className='lp-input'>
      <View className='left'>
        { props.renderleft } // good, nothing is done here
      </View>
      <View className='middle'>
        <Input placeholder={ placeholder } placeholderClass='placeholder-style'/>
      </View>
      <View className='right'>
        { renderRight } // bad, using deconstruction renderRight
      </View>
    </View>
  )
}

The reasons given by the official website are in place:

Matters needing attention
 Please do not do anything about this.props.children. Taro implements this function in small programs using slot function of small programs, that is to say, you can understand this.props.children as slot grammatical sugar. this.props.children is not React's React Element object in Taro, so it is like this.props.children & this.props.children, this. props. chil. Dren [0] is illegal in Taro.
this.props.children cannot set default content with defaultProps. Because of the limitation of the applet, Taro can't know whether the consumer of the component is importing the content, so it can't apply the default content.

this.props.children cannot be decomposed into variables for reuse. Because ordinary props have an exact value, they can be processed when you decompose them into variables, but this.props.children can't. You have to explicitly write all this.props.children to achieve its function.

Tags: Javascript React

Posted on Tue, 10 Sep 2019 02:23:12 -0700 by indigo2k