React/JavaScript组件中如何将字符串与接收的prop值拼接

错误原因说明 #

你现有代码报错的核心问题是：在普通JavaScript逻辑表达式中滥用{}语法。此处的{title}会被解析为创建一个键为title、值为传入prop的对象，字符串和对象直接拼接必然不符合预期。
注意：只有在JSX标签内部嵌入变量/表达式时，才需要用{}包裹内容

正确实现方式 #

方式1：加号直接拼接 #

删除多余的{}即可，适合简单拼接场景：

const ToolsCard = ({title}) => {
  const str = 'download' + title
}

方式2：模板字符串（更推荐） #

使用反引号包裹整个字符串，变量放在${}占位符中，适合多变量、多内容拼接的复杂场景，代码可读性更高：

const ToolsCard = ({title}) => {
  const str = `download ${title}`
}

JSX渲染补充说明 #

如果你需要把拼接好的字符串渲染到组件视图中，在JSX中使用时才需要加{}包裹：

const ToolsCard = ({title}) => {
  const str = `download ${title}`
  // JSX中嵌入变量需要加{}
  return <div className="download-btn">{str}</div>
}

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