在 React 中,JSX 是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 createElement 函数创建成一个 JavaScript 对象(React Element),因此实际上你可以这样写代码 React 也是完全能渲染的:

    1. const list = this.state.list.map(l => {
    2. if (l.selected) {
    3. return <li>{l.text}</li>
    4. }
    5. }).filter(React.isValidElement)

    你甚至可以这样写:

    1. const list = this.state.list.map(l => {
    2. if (l.selected) {
    3. return {
    4. '$$typeof': Symbol(react.element),
    5. 'props': {
    6. children: l.text
    7. },
    8. 'type': 'li'
    9. }
    10. }
    11. }).filter(React.isValidElement)

    但是 Taro 中,JSX 会编译成微信小程序模板字符串
    因此你不能把 map 函数生成的模板当做一个数组来处理
    当你需要这么做时,应该先处理需要循环的数组,
    再用处理好的数组来调用 map 函数。

    例如上例应该写成:

    1. const list = this.state.list
    2. .filter(l => l.selected)
    3. .map(l => {
    4. return <li>{l.text}</li>
    5. })