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

Question

In my react native function component I have the following function:

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

For each of the return VSCode reports that JSX inside brackets is not reachable, and the function actually behaves like that, returns undefined .

What am I doing wrong?

Answer 1

You should put brackets after return like:

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

because it stops on return and don't go to the next line. For future use code formatters so it will automatically format your code every time you save the file. Most popular is prettier . So you will not have problems like that because it will format your code in good way right after you click CTRL+S