React组件渲染无内容排查：新手仪表盘开发问题

核心问题分析 #

代码存在几个关键错误导致页面无法渲染内容：

• 类组件结构错误：React类组件的JSX必须通过render()方法返回，而非直接写在constructor里；且constructor必须先调用super(props)，否则会破坏组件继承链。
• JSX未被解析：使用Babel转译JSX时，脚本标签需指定type="text/babel"，否则浏览器无法识别JSX语法。
• 未定义的全局函数：代码中引用的closeErrorPopup、calculate函数未定义，会引发运行时错误。

修复后的代码 #

dashboard.js

class Cards extends React.Component {
    constructor(props) {
        super(props); // 必须调用super初始化父类
    }

    // 定义缺失的弹窗关闭函数
    closeErrorPopup = () => {
        document.getElementById('popup-error').style.display = 'none';
    }

    // 定义计算器计算函数
    calculate = () => {
        const total = parseFloat(document.getElementById('total').value) || 0;
        const percentage = parseFloat(document.getElementById('percentage').value) || 0;
        const num = parseFloat(document.getElementById('num').value) || 0;
        
        document.getElementById('percentageText').textContent = `${percentage}%`;
        document.getElementById('numText').textContent = num;
        
        const result = total * (percentage / 100) * num;
        document.getElementById('resultText').textContent = result.toFixed(2);
    }

    render() { // 通过render方法返回JSX，类组件渲染的标准方式
        return (
            <div className="cards">
                <div className="card-single">
                    <h1>IT-Scan Form</h1>
                    <a href="documents.html">Click here to start the IT-scan.</a>
                </div>
                <div className="parent">
                    <div className="card-single">
                        <h1 className="las la-clipboard-list">1 Documents</h1>
                        <span></span>
                    </div>

                    <div className="card-single">
                        <h1>Automatic Pentest</h1>
                        <button className="red-btn">Start</button>
                    </div>

                    <div className="card-single">
                        <h1>SMB</h1>
                        <button className="red-btn">Start</button>
                    </div>

                    <div className="card-single">
                        <h1>Enterprise</h1>
                        <button className="white-btn">Start</button>
                    </div>
                </div>

                <div className="popup-error" id="popup-error">
                    <img src="../images/x.png" alt="" />
                    <h2>Error</h2>
                    <p className="error" id="error"></p>
                    <button type="button" id="close" onClick={this.closeErrorPopup}>Reload</button>
                </div>

                <div className="messagebox" id="messagebox">
                    <p className="las la-exclamation-triangle" style={{ fontSize: '30px', color: '#f56c6c' }}></p>
                    <p className="messagebox-content" id="messagebox-content">This is a message box</p>
                </div>

                <div className="calculator">
                    <label htmlFor="total">Total</label>
                    <input type="number" id="total" value="0" placeholder="Enter value" />
                    <label htmlFor="percentage" style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span>Percentage %</span>
                        <span id="percentageText">0%</span>
                    </label>
                    <input type="range" id="percentage" onInput={this.calculate} onChange={this.calculate} />
                    <label htmlFor="num" style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span>Num</span>
                        <span id="numText">0</span>
                    </label>
                    <input type="number" id="num" onInput={this.calculate} onChange={this.calculate} />
                    <div className="result" id="result">
                        <h5 style={{ margin: '8px 0', display: 'flex', justifyContent: 'space-between' }}>
                            <span>Result</span>
                            <span id="resultText" style={{ fontSize: '1.2rem' }}>__.__</span>
                        </h5>
                    </div>
                </div>
            </div>
        );
    }
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Cards />);

index.html

<main>
    <div id="root"></div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- 添加type="text/babel"让Babel解析JSX语法 -->
    <script src="../reactJS/dashboard.js" type="text/babel"></script>
</main>

关键修改说明 #

1. 将JSX代码从constructor移至render()方法，遵循React类组件的渲染规范。
2. 在constructor中添加super(props)，保证组件继承关系正常。
3. 补充定义缺失的closeErrorPopup和calculate函数，使用类属性箭头函数避免this指向问题。
4. 为dashboard.js的脚本标签添加type="text/babel"，确保Babel能正确转译JSX。

内容的提问来源于stack exchange，提问作者KylianJay