多端開發框架,taro,採坑點:
1.組件內部的渲染jsx,須以render開頭,比如: 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
這樣子或許體會不是很深刻,都能跑,但是當組件傳遞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 全部都寫完整才能實現它的功能。