0

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

我知道 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
4

2 回答 2

0

因此，经过数小时的搜索和挠头后，我只是将这个函数放在我的模型中，它会覆盖 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

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

于 2020-12-29T06:20:33.160 回答
0

为什么不直接使用您的 Rails 模型并调用您to_s的ActionText::ContentPost 模型主体，例如：

class Post
 has_rich_text :body
end

Post.first.body.body.to_s
于 2021-08-01T11:10:38.747 回答