为什么这个 JSX 代码在 return 语句中报告为不可访问？答案

【问题标题】：Why is this JSX code reported as unreachable in the return statement?为什么这个 JSX 代码在 return 语句中报告为不可访问？
【发布时间】：2021-04-17 11:16:22
【问题描述】：

在我的 react native 函数组件中，我有以下函数：

const renderStatus = () => {
    if (status == Status.PENDING) {
        return
        (
            <Text>{Texts.statusPending}</Text>
        )
    }
    if (status == Status.DONE) {
        return
        (
            <Text>{Texts.statusDone}</Text>
        )
    }
    if (status == Status.UPLOADING) {
        return
        (
            <>
                <Text>{Texts.statusUploading}</Text>
                <Loader style={{ margin: 8 }} />
            </>
        )
    }
    if (status == Status.FAILED) {
        return
        (
            <>
                <Text>{Texts.statusFailed}</Text>
                <Text style={{ color: 'Crimson' }}>{model.error}</Text>
            </>
        )
    }
}

对于每个return VSCode 报告括号内的 JSX 不可访问，这个函数实际上是这样的，返回undefined。

我做错了什么？

【问题讨论】：

在 return 旁边带上“(”而不是下一行。
嗯，就是这样...非常感谢！多么无意义的语法。真的应该有人写一篇名为“使用 JSX 时注意左括号位置”的文章。
看看我的回答，也许它会对你未来有所帮助:)

标签： reactjs react-native jsx

【解决方案1】：

你应该在 return 之后加上括号：

 return( <Text>{Texts.statusPending}</Text> )

因为它在返回时停止并且不会转到下一行。供将来使用代码格式化程序，因此每次保存文件时它都会自动格式化您的代码。最受欢迎的是prettier。所以你不会有这样的问题，因为它会在你点击 CTRL+S 后立即格式化你的代码

【讨论】：