javascript - 将 .then() 内部的字符串作为 JSX 元素解析到外部
问题描述
在反应中,我导入了以下这些库
import React from "react";
import {
Container,
Row,
Col,
Card,
CardBody,
CardFooter,
Badge,
Button
} from "shards-react";
在函数内部,我有以下 fetch 方法,在 .then() 内部添加 JSX 元素
output=''
fetch(
"https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@MediumStaff"
)
.then(res => res.json())
.then(data => {
const res = data.items;
let a = 0;
res.forEach(item => {
if (a === 0 || a === 3 || a === 6 || a === 9) {
output += `<Row>`;
}
output += `<Col lg="6" md="6" sm="12" className="mb-4">
<Card small className="card-post card-post--1">
<div
className="card-post__image"
style={{ backgroundImage: "url("+"${item.thumbnail}"+")" }}
>
</div>
<CardBody>
//JSX elements
</CardBody>
</Card>
</Col>`;
if (a === 2 || a === 5 || a === 8 || a === 9) {
output += `</Row>`;
}
a += 1;
});
document.querySelector(".blog__slider").innerHTML = output;
console.log(output);
});
作为回报,我使用了以下代码
<div className="blog__slider"></div>
我认为 React 中的功能组件没有将输出值作为 JSX 组件。如果我得到更新输出值之外.then()
我可以使用dangerouslySetInnerHTML={{__html: output}}
解决方案
创建一个类组件并在该类组件的构造函数中添加一个数组状态。因为当类创建时,该状态将启动。使用 React 生命周期方法 componentDidMount 获取 JSON 对象并将 JSON 对象推送到数组状态,然后您可以在 render 方法中使用 JSX 元素
推荐阅读
- ruby-on-rails - 使用 RubyZip 生成文件并以 zip 格式下载
- android - 是否有任何一步一步的东西可以将情感分析和语音实施到我当前基于谷歌云视觉的人脸识别应用程序项目中?
- while-loop - System Verilog中while循环的额外迭代
- ios - Swift - Mopub 原生广告已成功加载,但未显示在视图中
- macos - 无法使用安装了 macports 的 MPICH mpirun 执行 MPI 程序
- jquery - 检索引导复选框的单击状态
- android - 防止网页链接打开本机应用程序,留在网页浏览器中
- c# - EF Code First-从多到多表返回记录
- ios - Stripe SDK integration using swift and flutter
- java - How can I have fonts inside project and use from project folder in NetBeans IDE?