只能在 render 函数中 定义 JSX

[xiao0502]

问题描述
列表渲染时，根据列表数组长度判断是否渲染情感图，运用三元运算符时，只能把代码写在里面，不能单独提取出来用函数执行吗？

[或者可以直接贴源代码，能贴文字就不要截图]

// 细节代码写在表达式里面是可以正常渲染的
render() {
    let len = this.state.addressList.length;
    return (
        <View>
            {
                len ? <View className="address-list">
                    {
                        this.state.addressList.map((item, index) => {
                            return (
                                <View key={index} className="address-item">
                                    <View className="hospital-name">{item.hospitalName}</View>
                                    <View className="hospital-info">
                                        <Text>{item.administrative}</Text>
                                        <Text>{item.inpatient}</Text>
                                        <Text>{item.sickbed}</Text>
                                    </View>
                                    <View className="user-info">
                                        <Text>{item.userName}</Text>
                                        <Text>{item.userMobile}</Text>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>: <View>123</View>
            }
        </View>
    )
}

renderList = () => {
    return (

    )
}

renderEmpty = () => {
    return <View>123</View>
}

// 细节代码用方法执行就渲染报错了

render() {
    let len = this.state.addressList.length;
    return (
        <View className={
            getIsIphoneX() ? 'page-wrapper page-addressManager IphoneX' : 'page-wrapper page-addressManager'}>
            {
                len ? this.renderList(): this.renderEmpty()
            }
        </View>
    )
}

renderList = () => {
    return (
        <View className="address-list">
            {
                this.state.addressList.map((item, index) => {
                    return (
                        <View key={index} className="address-item">
                            <View className="hospital-name">{item.hospitalName}</View>
                            <View className="hospital-info">
                                <Text>{item.administrative}</Text>
                                <Text>{item.inpatient}</Text>
                                <Text>{item.sickbed}</Text>
                            </View>
                            <View className="user-info">
                                <Text>{item.userName}</Text>
                                <Text>{item.userMobile}</Text>
                            </View>
                        </View>
                    )
                })
            }
        </View>
    )
}

renderEmpty = () => {
    return <View>123</View>
}

期望行为
希望能支持函数渲染具体代码

报错信息

[yuche]

有一条 eslint 的规则定义了这个行为：
https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-jsx-in-class-method.md

[codingwesley]

还是很赞了 比写原生小程序的语法好

[yuche]

Duplicate of #764