简单的反应组件不呈现

Question

我一直在试图弄清楚为什么我的组件在过去 5 小时内根本不显示。任何帮助是极大的赞赏。这是来源：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="modules/Container.js"></script>
    <script src="modules/CategoryFolder.js"></script>
    <script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script>
        let root = $('#root')[0];
        reactroot = ReactDOM.createRoot(root);
        reactroot.render(React.createElement(Container));
    </script>
</body>
</html>

modules/Container.jsx:

const SPACING = 10;

class Container extends React.Component {
    constructor() {
        super();
        this.state = {categories: []};
    }

    componentDidMount() {
        $.ajax({
            url: './items/categories',
            dataType: 'json',
            async: true,
            success: (categories) => {
                this.setState({categories});
            }
        })
    }

    render() {
            this.state.categories.map((category, i, a)=>{
                <CategoryFolder style={{'z-index':i,top:i*SPACING+'%'}} CategoryTitle={category}></CategoryFolder>
            })
    }
}

modules/CategoryFolder.jsx:

function CategoryFolder(props) {
    let css_class = '';
    let id = Number.parseInt(props.key) + 1;
    if (id % 3 == 0)css_class = 'tert-tag';
    else if (id % 3 == 2) css_class = 'even-tag';

    return (
        <div class="gwd-div-7ybz" name="folder-container">
            <div class={"gwd-div-qb7z " + css_class} name="folder-tag-container">
                <fieldset class="gwd-fieldset-poz5" name="folder-tag-text"><h1 class='category-title'>{props.CategoryTitle}</h1></fieldset>
            </div>
            <svg data-gwd-shape="rectangle" class="gwd-rect-c8gx" name="folder-recipe-body"></svg>
        </div>
    )
}

当我调试所有这些时，根元素被识别，我可以看到 ajax 函数成功和 Container 运行的渲染函数。但是，无论出于何种原因，根元素都保持不变，因为 <div id="root"></div> 从未被修改过。

提前致谢！

更新：我应该提一下，控制台完全没有显示错误！

更新 2： 发布的文件是 .jsx，而 index.html 中包含的文件是用 npx babel --watch modules/src --out-dir public/modules --presets react-app/prod

转译的

Answer 1

你没有 return <CategoryFolder style={{'z-index':i,top:i*SPACING+'%'}} CategoryTitle={category}></CategoryFolder> 在 map() 函数中

简单的反应组件不呈现

Simple react component does not render

javascript

node.js

reactjs