如何解决动作文本附件标签未显示在 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。