尝试在React中渲染HTML，但是什么都没有弹出

Question

我是React的新手，想开始使用它来提高我的仪表板/UI的用户稳定性和速度。我试图在一些HTML代码加载使用一个React组件，然后渲染它使用根div我已经创建。(见代码)我不确定我做错了什么，因为我没有得到任何错误在我的编辑器。

dashboard.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文件，我在这里加载组件。

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>
<script src="../reactJS/dashboard.js" ></script>

</main>

Answer 1

构造函数应该返回内容，它应该由渲染函数这样返回:

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

更多信息请访问React文档

Answer 2

将JSX代码从构造函数移到render()方法中

Answer 3

您的标记';返回';从类的构造函数中。在javascript中，构造函数不返回任何东西。

你可以实现一个render()方法，或者写一个"函数"。组件

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