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

在我的react本机函数组件中，我具有以下函数：

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>
            </>
        )
    }
}

constrenderstatus=（）=>{
if（status==status.PENDING）{
返回
(
{text.statusPending}
)
}
if（status==status.DONE）{
返回
(
{text.statusDone}
)
}
if（status==status.UPLOADING）{
返回
(
{text.statusupload}
)
}
if（status==status.FAILED）{
返回
(
{text.statusFailed}
{model.error}
)
}
}

对于每个

return

VSCode报告无法访问括号内的JSX， 函数的行为实际上是这样的，返回

undefined

---

我做错了什么？

您应该在return之后放上括号，如：

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

返回（{text.statusPending}）

---

因为它在返回时停止，不去下一行。为了将来使用代码格式化程序，它将在每次保存文件时自动格式化代码。最受欢迎的是。因此，您不会遇到这样的问题，因为在您单击CTRL+S后，它将以良好的方式格式化代码下一个返回，而不是下一行。嗯，就是这样…非常感谢！多么荒谬的语法。应该有人写一篇文章，名为“使用JSX时注意开括号位置”。请查看我的答案，也许它会对您的未来有所帮助：）