React内联CSS使用疑问：为何出现JSX需单一父元素提示？

你提供的代码如下：

{
  <div style={{color: 'red', padding-left: '30px',padding-top: '10px' }}>
    errorMessage
  </div>
}

这个报错和内联CSS完全无关，是JSX语法规则问题导致的，具体原因和解决方法如下：

报错原因 #

你给JSX元素多套了一层不必要的大括号。在JSX里，大括号用于嵌入JavaScript表达式，但直接把整个JSX元素包在大括号里，会让React无法正确识别这是一个单一的JSX元素——相当于你在返回一个包含JSX的表达式，而非直接返回JSX元素，触发了“必须有单一父元素”的语法检查。

另外还有一种可能：如果这段代码是和其他同级JSX元素一起返回的（比如return语句里同时有多个元素），也会触发这个报错，因为React要求返回的JSX结构必须有一个统一的父容器。

解决方法 #

分两种情况处理：

• 移除多余大括号：如果只是多套了一层大括号，直接删掉外层的{}即可，同时注意把CSS属性名改成驼峰式（JSX的style属性要求驼峰式命名，比如padding-left要改成paddingLeft），如果errorMessage是变量，也要用大括号包裹才能正确渲染，修正后的代码：

<div style={{color: 'red', paddingLeft: '30px', paddingTop: '10px' }}>
  {errorMessage}
</div>

• 添加统一父容器：如果这段代码和其他元素同级返回，用一个父元素把所有元素包裹起来，推荐用React的<>（Fragment空标签，不会在DOM中生成额外节点）：

<>
  <div style={{color: 'red', paddingLeft: '30px', paddingTop: '10px' }}>
    {errorMessage}
  </div>
  <p>其他需要展示的内容</p>
</>

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