React.js中添加JSON数据时的多行文本转单行编辑问题

你遇到的问题本质是JS里单引号/双引号不能直接写多行字符串，且需要把多行内容合并成单行，给你几个实用方案：

1. 手动合并（少量行适用） #

直接把多行文本里的换行去掉，用单个空格连接成一行，注意删掉多余的缩进：

const Translations = {
   example1:'xxxxx',
   example2:'xxxxxxxxxx',
   example3:'xxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx'
}
export default Translations;

2. 模板字符串+正则替换（多行文本自动处理） #

用ES6模板字符串（反引号）包裹多行内容，再通过正则替换掉换行和多余空格，一次性转成单行：

const Translations = {
   example1:'xxxxx',
   example2:'xxxxxxxxxx',
   example3: `xxxxxxxxx
         xxxxxxxxxxx
         xxxxxxxxxxx`.replace(/\n\s+/g, ' ')
}
export default Translations;

这里的正则/\n\s+/g会匹配所有换行符加后续的多个空格，替换成单个空格，刚好解决多行缩进的问题。

3. 批量处理外部多行文本（比如用户输入或文件读取） #

如果多行文本是从外部获取的（接口返回、用户输入等），可以写个工具函数统一处理：

const convertToSingleLine = (multiLineText) => {
  // 先去掉所有换行符，再把连续多个空格换成单个空格，最后去掉首尾空格
  return multiLineText.replace(/[\n\r]/g, ' ').replace(/\s+/g, ' ').trim();
}

// 使用示例
const multiLine = `xxxxxxxxx
         xxxxxxxxxxx
         xxxxxxxxxxx`;

const Translations = {
   example1:'xxxxx',
   example2:'xxxxxxxxxx',
   example3: convertToSingleLine(multiLine)
}
export default Translations;

另外注意你原代码里的小问题：最后导出的italianTranslations和定义的Translations变量名不一致，要改成一致避免报错。

内容的提问来源于stack exchange，提问作者Barış züngür