在react 18我如何使用createRoot渲染类组件?

Question

我正在尝试将我的应用程序转换为React 18的渲染方法。

我有一个类组件，不渲染到root元素。如何让createRoot元素呈现组件，以及在哪里放置

const root = ReactDOM.createRoot(document.getElementById("myrenderelement")); 
// please notice I'm not rendering to root as I said above   ^^^

这在类定义之外，在状态…在哪里?如果我把它放在类之外，我会得到这个错误:

Syntax error: Unexpected token (80:6)
78 |  
79 |
> 80 |  root.render() {
|      ^
81 |      return (
82 |          <div className="myclass">
83 |              <div className="container">

也一样

root = ReactDOM.createRoot(document.getElementById("myrenderelement"));
root.render() {

和

ReactDOM.createRoot(document.getElementById("myrenderelement")).render() {

我总是说"意外符号"在那一行

如果我尝试:

class MyClass extends React.Component {
constructor(props) {
super(props)
this.state = {
<my state vars>
root: ReactDOM.createRoot(document.getElementById("myrenderelement"))
}
}
....

然后

this.state.root.render() { <whatever>

我在渲染行再次得到意外的标记:/

如何渲染类组件?

Answer 1

对于root.render来说，您的组件是class组件还是功能组件并不重要。在这两种情况下，你传递React元素来渲染它(通常通过JSX创建元素)，如页面所示，如果你使用旧的方式，React v18的开发版本链接到:

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

class Child extends React.Component {
render() {
return <div>Child Component</div>;
}
}
class Example extends React.Component {
render() {
return (
<div>
Top-Level Component
<Child />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

只用于应用程序的根目录，即顶层。