在反应中,我导入了以下库
import React from "react";
import {
Container,Row,Col,Card,CardBody,CardFooter,Badge,Button
} from "shards-react";
在函数内部,我有以下提取方法,在.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}}