如果导入的对象已经被渲染,如何在React中渲染JavaScript对象?

tzxcd3kk  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(146)

我也想渲染Page对象,我该如何渲染它?

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {Navbar, MainContent} from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
const Page = (
  <div>
    <h2>This is react</h2>
    <p>This is a paragraph</p>
  </div>
);
root.render(
  <React.StrictMode>
    <Navbar />
    <MainContent />
  </React.StrictMode>
);

如果我包括Page对象(如正常React组件),则屏幕变为空白

然而,如果我删除Page,则

工作正常

pgvzfuti

pgvzfuti1#

最简单的方法是

<React.StrictMode>
<Navbar />
<MainContent />
{page}
</React.StrictMode>

否则,制作组件并像上面提到的答案那样使用它。但是,我使用了JSX(你可以阅读它来获得更多的信息和掌握更多的概念,它很强大)

bjp0bcyl

bjp0bcyl2#

首先,最好使用Capital来编写组件名称,这样就可以将其更改为Page。然后,您可以像渲染其他元素一样渲染它,例如:

<React.StrictMode>
    <Navbar />
    <MainContent />
    <Page />
</React.StrictMode>

顺便说一句,你可以改一下顺序。

相关问题