JSX文件中使用可选链操作符?.报错，如何正确使用？

问题场景 #

我编写了如下React组件代码：

const MyMessage = ({ message }) => { 
if(message?.attachments?.length > 0){
    // 存在图片附件
    return(
        <img
            src={message.attachments[0].file}
            alt="message-attachment"
            className='message-image'
            style={{ float: 'right' }}
        />
    )
}}

但使用?.语法时触发了以下语法错误：

react_devtools_backend.js:4026

Error in ./src/components/MyMessage.jsx
Syntax error: C:/Users/GitHub/react_chat_app/src/components/MyMessage.jsx: Unexpected token (4:15)

当移除?.改用if(message.attachments.length > 0)时，代码可正常运行，请问使用?.时的语法问题出在哪里？

原因分析及解决方案 #

• 核心原因：可选链操作符?.是ES2020新增的语法特性，你的项目构建工具（如Babel、Create React App）未配置对该语法的支持，导致编译器无法识别?.，从而抛出语法错误。

• 具体解决方式：

  • 若使用旧版Create React App（v3及更早版本）：默认不支持ES2020语法，需手动安装@babel/plugin-proposal-optional-chaining插件，并在Babel配置文件中添加该插件；或者直接升级到Create React App v4及以上版本，新版已默认支持ES2020特性。
  • 若使用自定义Babel配置：确保@babel/preset-env预设的目标环境包含支持ES2020的浏览器，或者单独添加@babel/plugin-proposal-optional-chaining插件到Babel配置中。

• 注意事项：直接移除?.虽然能暂时让代码运行，但存在隐患——如果message或message.attachments为undefined或null，直接访问message.attachments.length会抛出Cannot read properties of undefined的运行时错误，因此建议优先解决可选链的语法支持问题，而非直接移除该语法。

内容的提问来源于stack exchange，提问作者Mwspencer