尝试在 React 中呈现 HTML，但没有弹出任何内容答案

【问题标题】：Trying to render HTML in React, but nothing pops up尝试在 React 中呈现 HTML，但没有弹出任何内容
【发布时间】：2023-01-11 17:57:09
【问题描述】：

我是 React 的新手，想开始使用它来提高我的仪表板/UI 的用户稳定性和速度。我正在尝试使用 React 组件加载一些 HTML 代码，然后使用我创建的根 div 呈现它。（见代码）我不确定我哪里做错了，因为我的编辑器没有出现任何错误。

仪表板.js：

class Cards extends React.Component {
    constructor(props) {
    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={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={calculate} onChange={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={calculate} onChange={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 />);

这是我的 HTML 文件，我正在其中加载组件。

索引.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>

  <script src="../reactJS/dashboard.js" ></script>


            </main>

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

构造函数应该返回内容，它应该由渲染函数返回，如下所示：

class Cards extends React.Component {
    render() {
        return (
            <div className="cards">
                ...
            </div>
        );
    }
};

欲了解更多信息，请访问React docs

【讨论】：

【解决方案2】：

您从类的构造函数中“返回”了您的标记。在 javascript 构造函数中不返回任何东西。

您可以实现 render() 方法，或编写一个“功能性”组件，如本例所示：

    const Cards = () => {
      return <div>...</div>;
    }

【讨论】：