React组件中div内无法访问props？为何提示变量未定义

我有如下React组件代码：

const Suggestions = ({ suggestions }) => {
  return (
    suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)
  )
}

我想把渲染出的所有<p>标签用一个带suggestions类名的<div>包裹，期望最终渲染效果如下：

<div class="suggestions">
    <p>suggestion1</p>
    <p>suggestion2</p>
          ...
</div>

于是我修改代码为：

const Suggestions = ({ suggestions }) => {
  return (
     <div className="suggestions">
        suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)
     </div>
  )
}

但此时控制台提示suggestions和i未定义，为什么在div元素内访问不了这个props？

原因分析 #

在JSX语法里，标签内部直接书写的内容会被视为普通文本，而非JavaScript代码。你直接在<div>中写suggestions.map(...)，React会把这段内容当作字符串处理，自然无法识别其中的变量suggestions和i。

解决方法 #

要在JSX中执行JavaScript表达式（比如数组遍历、变量引用等），必须将表达式用**大括号{}**包裹。修改后的正确代码如下：

const Suggestions = ({ suggestions }) => {
  return (
     <div className="suggestions">
        {suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)}
     </div>
  )
}

这样React就能正确识别并执行{}内部的map函数，将所有<p>标签渲染出来并包裹在目标<div>中。

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