共计 1920 个字符,预计需要花费 5 分钟才能阅读完成。
多端开发框架,taro,采坑点:
1. 组件内部的渲染 jsx,须以 render 开头,比如: 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
这样子或许体会不是很深刻,都能跑,但是当组件传递 jsx 的时候会爆炸,譬如以下这个简单的函数式组件例子 LpInput
,它在 input
左右各接收一个参数 left、right,父组件可能会传递 string、jsx 等等:
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
调用:
<LpInput left='leftText' right=(<Text>rightText</Text>) />
当父组件传递 jsx 时,taro 会抛出异常:
ReferenceError: React is not defined
或
thirdScriptError React is not defined;
必须要以 render 开头:renderLeft、renderRight
2. 不要对 props.children 进行任何操作,比如解构:const {children} = props
,继上个例子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>
)
}
官网给出的原因:
请不要对 this.props.children 进行任何操作。Taro 在小程序中实现这个功能使用的是小程序的 slot 功能,也就是说你可以把 this.props.children 理解为 slot 的语法糖,this.props.children 在 Taro 中并不是 React 的 ReactElement 对象,因此形如 this.props.children && this.props.children、this.props.children[0] 在 Taro 中都是非法的。
this.props.children 无法用 defaultProps 设置默认内容。由于小程序的限制,Taro 也无法知道组件的消费者是否传入内容,所以无法应用默认内容。
不能把 this.props.children 分解为变量再使用。由于普通的 props 有一个确切的值,所以当你把它们分解为变量运行时可以处理,this.props.children 则不能这样操作,你必须显性地把 this.props.children 全部都写完整才能实现它的功能。
正文完
发表至: javascript
2019-09-10