javascript - 将.then()内部的字符串解析为JSX元素到外部

在反应中，我导入以下库

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}}

最佳答案

创建一个类组件，并在该类组件的构造函数中添加一个数组状态。因为当类创建时，该状态将启动。使用React生命周期方法componentDidMount提取JSON对象并将JSON对象推入数组状态，然后可以在render方法中使用JSX元素

codesandbox.io/s/twilight-breeze-plbby

关于javascript - 将.then()内部的字符串解析为JSX元素到外部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59128009/