React中不修改renderSomething函数输出{something}失败原因排查

你的代码执行失败且无法得到预期输出，核心问题出在JSX与模板字符串的语法混用错误上。

先看你render方法里的这段代码：

return <div>{` `{` ${this.renderSomething()} `}` `}</div>

这里的写法完全混乱了：

• JSX中，我们用{}来包裹JavaScript表达式，但你在模板字符串（反引号包裹的部分）里又嵌套了{}，这会导致语法解析错误——JavaScript模板字符串里的{}是用来插入变量的，但你这里的写法不符合模板字符串的语法规则，React无法正确解析。
• 另外你额外加了很多多余的空格和反引号，进一步扰乱了语法结构。

要在页面输出{something}，我们只需要正确组合模板字符串和JSX表达式即可，把renderSomething返回的值嵌入到带大括号的字符串里：

修正后的代码如下：

class App extends React.Component {
  renderSomething = () => `something`
  render() {
    return <div>{`{${this.renderSomething()}}`}</div>
  }
}

解释一下：

1. 在JSX的{}里，我们使用模板字符串{{${this.renderSomething()}}}，这里的模板字符串内部：
   • 外层的{和}是我们要输出的字面量符号
   • ${this.renderSomething()}用来插入renderSomething返回的"something"
2. 这样React会正确解析这个表达式，最终在页面渲染出{something}。

另外你也可以不用模板字符串，用普通字符串拼接的方式：

return <div>{'{' + this.renderSomething() + '}'}</div>

效果完全一致，看你个人习惯选择即可。

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