动作文本附件标签未显示在 React 前端

问题描述

我使用 Action Text/Active Storage 创建了一个 rails 6 博客应用程序，图像在 rails 服务器上加载得很好。但是，当我使用 api 调用来获取 json 并在之后使用危险的SetInnerHtml 来响应转换原始 html 时，它不会呈现由 Action Text 存储在数据库中的图像。

我知道 React 不支持存储在数据库中的“Action-text-attachment”标签，但是任何人都可以通过这种方法提出更好的解决方法或建议，这让我发疯了。

API 调用

{
    "id": 5,"created_at": "2020-12-07T11:34:27.443Z","updated_at": "2020-12-14T14:06:53.671Z","title": "One in five deaths in north Wales Now being caused by Covid-19","topic_id": 1,"user_id": 1,"status_id": 2,"rich_text_body": {
    "id": 5,"name": "body","body": "<div><action-text-attachment content-type=\"image\" url=\"https://i2-prod.dailypost.co.uk/incoming/article18128897.ece/ALTERNATES/s615/1_WORLD_Coronavirus_185952.jpg\" width=\"615\" height=\"409\" caption=\"Electron microscope image from the US National Institutes of Health showing the SARS-CoV-2 virus which causes Covid-19\"></action-text-attachment><br><br>According to figures released yesterday by the Office for National Statistics,there were 24 Covid deaths across north Wales during the week – up from 22 the week before,and 10 the week before that.<br><br></div><div>Of these,16 Covid deaths were in hospitals,up from 13 the prevIoUs week,with eight deaths in care homes,the same as the preceding week.<br><br></div><div>Up to November 13,the pandemic had claimed a total of 664 lives across north Wales.<br><br></div><div>Of those deaths,most (530) took place in hospital,with 107 in care homes.<br><br></div><div>There were also 19 deaths recorded at home,five in hospices,two in other communal establishments,and one elsewhere.<br><br></div><div>Other communal establishments include prisons,halls of residence,hotels,and sheltered accommodation. “Elsewhere” covers deaths outside and people declared dead on arrival at hospital.<br><br></div><div>The figures are based on deaths where <a href=\"https://www.dailypost.co.uk/all-about/coronavirus\"><strong>Covid-19</strong></a> is mentioned on the death certificate.<br><br></div><div>Separate statistics from the Care Inspectorate Wales (CIW) show 12 deaths involving coronavirus among care home residents in north Wales in the week ending November 20.<br><br></div><div>This was up from nine the week before.<br><br></div>","record_type": "Blog","record_id": 5,"created_at": "2020-12-07T11:34:27.448Z","updated_at": "2020-12-07T11:34:27.448Z"
},

反应组件

import React,{ Component } from 'react'

import axios from 'axios'

class BlogsContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      blogs: []
    }
  }

  getBlogs() {
    axios.get('blogs')
    .then(response => {
      this.setState({blogs: response.data})
    })
    .catch(error => console.log(error))
  }

  componentDidMount() {
    this.getBlogs()
  }



  render() {
return (
  <div>
    <div className="listWrapper">
      <ul className="taskList">
        {this.state.blogs.map((blog) => {

          return(
            <li className="display-blog" blog-source={blog} key={blog.id}>       
              <label className="blog-title">{blog.title}</label>
              <div dangerouslySetInnerHTML={{__html: blog.rich_text_body.body}} />
            </li>
          )       
      })}       
      </ul>
    </div>
 </div>
)
  }
}

export default BlogsContainer

解决方法

所以经过几个小时的搜索和摸索，我只是把这个函数放在我的模型中，它覆盖了 json 响应，中提琴图像神奇地开始出现，完整的 html 开始呈现。

def as_json(options = {})
  json_to_return = super
  rtb = self.body.to_s
  json_to_return[:rich_text_body] = rtb
  
  return json_to_return
end

编辑：更好的方法显然是创建一个序列化程序，然后使用它来转换富文本内容。

,

为什么不直接使用 Rails 模型并在 Post 模型主体的 to_s 上调用 ActionText::Content，如下所示：

class Post
 has_rich_text :body
end

Post.first.body.body.to_s