如何在React组件中从解析后的JSON渲染图片？

嘿，我来帮你搞定这个图片渲染的问题！咱们先理清楚现有代码的小问题，再一步步实现图片的渲染～

第一步：把解析后的数据放到组件state中 #

你之前用了全局变量theObject来存解析后的JSON，这在组件复用或者状态更新时容易出问题，咱们换成React的state来管理数据，同时推荐用componentDidMount（componentWillMount已经被React废弃了）来做JSON解析：

import React, { Component } from 'react';
import PropTypes from 'prop-types'; // 记得引入PropTypes

class Blog extends Component{
  constructor(props){
    super(props);
    this.state = {
      blogData: null // 用state存储解析后的博客数据
    };
  }

  componentDidMount(){
    try {
      // 解析传入的JSON字符串
      const blogData = JSON.parse(this.props.blogContent);
      this.setState({ blogData });
    } catch (error) {
      console.error('JSON解析失败:', error);
    }
  }

第二步：理解JSON结构的关联逻辑 #

你的JSON里有两个核心部分：

• blocks：存储博客的内容块（文本、空块等）
• entityMap：存储所有媒体实体（比如你的图片），每个实体用唯一key标识，blocks里的entityRanges会关联这些实体的key

第三步：修改render函数，渲染图片 #

现在咱们遍历每个block，检查它是否关联了图片实体，然后渲染对应的图片：

render() {
    const { blogData } = this.state;
    
    // 数据还没加载完成时显示加载状态
    if (!blogData) {
      return <div>加载中...</div>;
    }

    return(
      <div className="blog header">
        {blogData.blocks.map((block, index) => {
          let content = [];
          
          // 如果block有文本内容，先添加文本
          if (block.text.trim()) {
            content.push(<p key={`text-${index}`}>{block.text}</p>);
          }

          // 检查当前block是否关联了实体（比如图片）
          if (block.entityRanges && block.entityRanges.length > 0) {
            block.entityRanges.forEach(range => {
              const entity = blogData.entityMap[range.key];
              // 判断实体类型是否为图片
              if (entity.type === 'IMAGE') {
                const { src, width, height } = entity.data;
                content.push(
                  <img 
                    key={`img-${index}-${range.key}`}
                    src={src} 
                    style={{ width, height }} 
                    alt="博客配图" 
                  />
                );
              }
            });
          }

          // 如果content为空（比如纯空块），可以跳过渲染
          return content.length > 0 ? <div key={index}>{content}</div> : null;
        })}
      </div>
    );
  }
}

// 修正PropTypes的拼写（注意是大写的T）
Blog.propTypes = {
  blogContent: PropTypes.string
}

export default Blog;

额外说明 #

你提供的示例JSON里，blocks的entityRanges是空数组，所以不会渲染图片。如果实际数据里有图片，blocks里会有对应的entityRanges，比如类似这样的结构：

"blocks": [{ 
  "key":"mm3r", 
  "text":"", 
  "type":"unstyled", 
  "depth":0, 
  "inlineStyleRanges":[], 
  "entityRanges":[{"key":0, "offset":0, "length":0}], 
  "data":{}
}]

这样就能正确关联到entityMap里的0号图片实体了。

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