在 React 中,JSX 是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 createElement
函数创建成一个 JavaScript 对象(React Element),因此实际上你可以这样写代码 React 也是完全能渲染的:
const list = this.state.list.map(l => {
if (l.selected) {
return <li>{l.text}</li>
}
}).filter(React.isValidElement)
你甚至可以这样写:
const list = this.state.list.map(l => {
if (l.selected) {
return {
'$$typeof': Symbol(react.element),
'props': {
children: l.text
},
'type': 'li'
}
}
}).filter(React.isValidElement)
但是 Taro 中,JSX 会编译成微信小程序模板字符串,
因此你不能把 map
函数生成的模板当做一个数组来处理。
当你需要这么做时,应该先处理需要循环的数组,
再用处理好的数组来调用 map 函数。
例如上例应该写成:
const list = this.state.list
.filter(l => l.selected)
.map(l => {
return <li>{l.text}</li>
})