如何在React.js中映射JSON数据？

核心实现思路 #

你的JSON数组中存储的是HTML字符串，React默认会转义这类字符串，所以需要结合map数组方法和dangerouslySetInnerHTML属性来完成渲染，具体步骤如下：

完整代码示例 #

import React from 'react';

const temp1 = [
  {
    code:"<h1>Hai</h1>",
    img: "<img src='https://www.sitesaga.com/wp-content/uploads/2020/04/what-is-website-how-it-works.png' className='img'/>",
  },
  {
    code:"<h1>World</h1>",
    img: "<img src='https://ceblog.s3.amazonaws.com/wp-content/uploads/2018/08/28183850/home_post_2.gif' className='img'/>",
  }
];

const App = () => {
  return (
    <div className="item-list">
      {/* 遍历temp1数组，生成对应的React元素 */}
      {temp1.map((item, index) => (
        <div key={index} className="list-item">
          {/* 渲染code字段的HTML内容 */}
          <div dangerouslySetInnerHTML={{ __html: item.code }} />
          {/* 渲染img字段的HTML内容 */}
          <div dangerouslySetInnerHTML={{ __html: item.img }} />
        </div>
      ))}
    </div>
  );
};

export default App;

关键细节说明 #

• 数组遍历：使用Array.prototype.map遍历temp1数组，为每个数组项返回一个React元素，必须给每个元素指定唯一的key属性（示例中用index是临时方案，实际项目建议使用数据自带的唯一标识，比如id）
• HTML字符串渲染：React默认会转义HTML字符串，因此需要用dangerouslySetInnerHTML属性来解析并渲染HTML内容。注意：这个属性存在XSS风险，确保你渲染的HTML内容是可信的，避免注入恶意代码
• 样式优化：可以通过给外层容器和列表项添加CSS类（比如示例中的item-list、list-item）来调整布局和样式

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