React条件渲染报',' expected错误，求问题原因及解决方法

错误出在return语句里的{tipoEscolha && (...)}部分——你给条件渲染表达式额外套了一层大括号{}，这是语法错误。

在React函数组件中，return后的括号直接包裹JSX元素或表达式即可，只有在JSX内部嵌入JavaScript逻辑时才需要使用大括号。这里的条件渲染表达式本身可以直接作为return的返回值，不需要额外包裹大括号。

修正后的代码 #

import React, { useState, useEffect } from 'react';
import '../styles/Listagem.css'

const Turmas = ({tipoEscolha}) => {
    
    return tipoEscolha && (
        <>
            <label htmlFor="TURMA1">Turma 1</label>
            <input type="checkbox" id="TURMA1" name="TURMAS" value="TURMA1"/>

            <label htmlFor="TURMA2">Turma 2</label>
            <input type="checkbox" id="TURMA2" name="TURMAS" value="TURMA2"/>

            <label htmlFor="TURMA3">Turma 3</label>
            <input type="checkbox" id="TURMA3" name="TURMAS" value="TURMA3"/>

            <label htmlFor="TURMA4">Turma 4</label>
            <input type="checkbox" id="TURMA4" name="TURMAS" value="TURMA4"/>

            <label htmlFor="TURMA5">Turma 5</label>
            <input type="checkbox" id="TURMA5" name="TURMAS" value="TURMA5"/>

            <label htmlFor="TURMA6">Turma 6</label>
            <input type="checkbox" id="TURMA6" name="TURMAS" value="TURMA6"/>

            <label htmlFor="TURMA7">Turma 7</label>
            <input type="checkbox" id="TURMA7" name="TURMAS" value="TURMA7"/>
        </>
    );
}
 
export default Turmas;

也可以保留return的外层括号，去掉条件渲染表达式的包裹大括号，写法如下：

return (
    tipoEscolha && (
        <>
            {/* 内容不变 */}
        </>
    )
);

内容的提问来源于stack exchange，提问作者João Pedro Oliveira