时间戳

首页 > 解决方案 > React 转换 xml 以显示为 html

reactjs - React 转换 xml 以显示为 html

问题描述

您好，我有一个通用标头，我正在使用 api 调用来获取 xml。我有一个工作代码，想知道您是否可以提供完整的替代方式代码以显示为 html

这是我的工作代码

import React, { useEffect, useRef } from 'react';
import axios from 'axios';

function Header() {
    const ref = useRef(null);
    const appendToNode = (node, content) => {
        node.innerHTML += content;
    };

    useEffect(() => {
        const DOMParse = new DOMParser();
        let xmlDoc;
        axios
            .get(
                'name of xml',
                {
                    'Content-Type': 'application/xml; charset=utf-8'
                }
            )
            .then(response => {
                xmlDoc = DOMParse.parseFromString(response.data, 'text/xml');
                appendToNode(
                    ref.current,
                    xmlDoc.querySelector('cssIncludes').textContent
                );
                appendToNode(
                    ref.current,
                    xmlDoc.querySelector('javascriptIncludes').textContent
                );
                appendToNode(
                    ref.current,
                    xmlDoc.querySelector('headerHtml').textContent
                );
            })
            .catch(err => console.log(err));
    }, []);

    return (
        <React.Fragment>
            {/*Landing Screen*/}
            <div>
                <div ref={ref} />
            </div>
        </React.Fragment>
    )
}

export default Header;

标签： reactjs

解决方案

我错过了一个jQuery代码

<script src="https://www.microsoft.com/onerfstatics/marketingsites-wcus-prod/shell/_scrf/js/themes=default/54-af9f9f/c0-247156/de-099401/e1-a50eee/e7-954872/d8-97d509/f0-251fe2/46-be1318/77-04a268/11-240c7b/63-077520/a4-34de62/bb-d7480b/db-bc0148/dc-7e9864/6d-c07ea1/b0-ec9dd0/f6-aa5278/cd-23d3b0/6d-1e7ed0/b7-cadaa7/c4-898cf2/ca-40b7b0/4e-ee3a55/3e-f5c39b/c3-6454d7/f9-7592d3/92-10345d/79-499886/7e-cda2d3/69-13871c/6a-234a32/e0-3c9860/91-97a04f/1f-100dea/33-abe4df/17-f90ef1?ver=2.0&_cf=20210618&iife=1"></script>
  <script src="https://www.microsoft.com/onerfstatics/marketingsites-wcus-prod/_h/dfa0b592/coreui.statics/externalscripts/jquery/jquery-3.5.1.min.js"></script>

推荐阅读