如何在React函数式组件中用map函数处理div内的h1标签？

你当前的代码只是把整个数组直接输出到单个<h1>标签里，React会自动把数组元素拼接成逗号分隔的字符串，不会生成多个<h1>标签。要实现每个水果对应一个<h1>，得用数组的map()方法遍历生成JSX元素，具体修正如下：

修正后的代码 #

const fruit = ["Apple", "Mango", "Litchi", "Pineapple"];

<div className="container"> {/* React中要用className替代class */}
    <div className="left-container">
        {fruit.map((item) => (
            <h1 key={item}>{item}</h1>
            {/* 水果名唯一，直接用item作为key更稳妥 */}
        ))}
    </div>
</div>

关键说明 #

• map()方法：遍历数组的每个元素，返回对应的<h1>标签，最终生成一个JSX元素数组，React会自动渲染这个数组里的所有元素。
• key属性：必须给列表中的每个元素添加唯一的key，帮助React追踪列表项的变化。如果你的水果名称有重复，建议用业务数据里的唯一ID当key；无重复的情况下，直接用元素本身即可。
• className替代class：React的JSX语法里，不能直接用class属性，必须换成className，否则会触发语法错误。

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