React多行字符串反斜杠渲染及unterminated string literal报错问题

问题原因 #

在JSX中直接通过单/双引号给属性传字符串值时，内容会按静态字面量规则解析：

• 行尾添加的反斜杠\不会被识别为JavaScript语法里的字符串续行标记，会直接作为普通字符被存入字符串，最终渲染到页面中
• 直接在引号内部换行会触发未闭合字符串的语法报错；如果没有用大括号标记表达式区域，哪怕用+做字符串拼接，也会被解析为普通字符串内容，达不到预期效果

正确实现方式 #

用ES6模板字符串（反引号`）包裹多行文本，同时属性值外层必须包裹大括号{}，告诉JSX解析器括号内是需要执行的JavaScript表达式，而非静态字符串：

<H 
  header="Header" 
  subheader={`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`}
/>

注意事项 #

模板字符串会完整保留内部的换行和缩进空格，如果最终渲染的文本不需要这些多余空白，可以按需处理：

• 书写续行文本时手动对齐，减少不必要的前置缩进
• 把长文本提前定义为组件外部的常量，处理完多余空白后再传入组件属性

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