reactjs - 如何在 React 对话框中查看格式化的 xml

Question

我学习 React 并希望在这样的对话框中显示 xml:

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import TypoGraphy from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
}));


const NavBar = () => {
    const [open, setOpen] = React.useState(false);
    const [scroll, setScroll] = React.useState('paper');

    const handleClickOpen = scrollType => () => {
        setOpen(true);
        setScroll(scrollType);
    };

    function handleClose() {
        setOpen(false);
    }
    const classes = useStyles();
    return (
        <div>
            <AppBar color="primary" position="static">
                <Toolbar>
                    <TypoGraphy variant="title" color="inherit" className={classes.title} >
                        React Redux App Book Search Api
                   </TypoGraphy>
                    <Button onClick={handleClickOpen('paper')} color="inherit">View DB </Button>
                    <Dialog
                        open={open}
                        onClose={handleClose}
                        scroll={scroll}
                        aria-labelledby="scroll-dialog-title"
                    >
                        <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
                        <DialogContent dividers={scroll === 'paper'}>
                            <DialogContentText>
                                {[...new Array(50)]
                                    .map(
                                        () => `<?xml version="1.0"?>
<catalog>
  <book id="B1">
    <author>Kutner, Joe</author>
    <title>Deploying with JRuby</title>
    <genre>Computer</genre>
    <price>33.00</price>
    <publish_date>2012-08-15</publish_date>
    <description>Deploying with JRuby is the missing link between enjoying JRuby and using it in the real world to build high-performance, scalable applications.</description>
  </book>
  <book id="B2">
    <author>Ralls, Kim</author>
    <title>Midnight Rain</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-12-16</publish_date>
    <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
  </book>
  <book id="B3">
    <author>Corets, Eva</author>
    <title>Maeve Ascendant</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-11-17</publish_date>
    <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description>
  </book>
</catalog>`,
                                    )
                                    .join('\n')}
                            </DialogContentText>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleClose} color="primary">
                                Cancel
          </Button>
                            <Button onClick={handleClose} color="primary">
                                Subscribe
          </Button>
                        </DialogActions>
                    </Dialog>
                </Toolbar>
            </AppBar>
        </div>
    )
}
export default NavBar;

但是格式不正确，无法读取。有没有办法很好地格式化它？

更新感谢@DanAndreasson

我已经尝试过:(使用 https://github.com/svenheden/xml-beautifier )

import beautify from 'xml-beautifier';


const xml = beautify(`<?xml version="1.0"?>
<catalog>
  <book id="B1">
    <author>Kutner, Joe</author>
    <title>Deploying with JRuby</title>
    <genre>Computer</genre>
    <price>33.00</price>
    <publish_date>2012-08-15</publish_date>
    <description>Deploying with JRuby is the missing link between enjoying JRuby and using it in the real world to build high-performance, scalable applications.</description>
  </book>
</catalog>`)

然后在渲染中:

   <DialogContent dividers={scroll === 'paper'}>
       <DialogContentText>
             <div>{xml}</div>
       </DialogContentText>
   </DialogContent>

但是这个“xml-beautifier”什么也不做，我想我需要在 DialogContentText 中添加更多内容才能使其正常工作

Answer 1

对于其他对此不熟悉的人，我使用以下方法使其工作:

https://www.npmjs.com/package/xml-beautifier

基本上是这样的:

var xmlText = `<? xml version = "1.0" ?>
    <catalog>
        <book id="B1">
            <author>Kutner, Joe</author>
            <title>Deploying with JRuby</title>
            <genre>Computer</genre>
            <price>33.00</price>
            <publish_date>2012-08-15</publish_date>
            <description>Deploying with JRuby is the missing link between enjoying JRuby and using it in the real world to build high-performance, scalable applications.</description>
        </book>
    </catalog>`;

然后使用美化:

const result1 = beautify(xmlText);

并在 Material-ui 中像这样渲染它:

<DialogContentText>
     {result1}
</DialogContentText>