在React页面中使用菜单呈现组件。

huangapple
go评论87阅读模式
英文:

rendering a component inside a react page using Menu

问题

我有一个菜单和页面的主体。我已经创建了不同的页面作为组件，并添加了一些文本。我希望的是，当我点击侧边栏菜单时，这些组件会在主页面中显示。如何使这个工作？

  1. const items2 = [{
  2.     label: 'Rice',
  3.     key: 'rice',
  4. },
  5. {
  6.     label: 'AB Test',
  7.     key: 'ab',
  8. }]
  10. const MainLayout = () => {
  11.     const {
  12.         token: { colorBgContainer },
  13.     } = theme.useToken();
  15.     const navigate = useNavigate();
  16.     const onClick = (e) => {navigate(`/${e.key}`)}
  18.     return (
  19.         <Layout>
  20.             <Sider>
  21.                 <Menu
  22.                     mode="inline"
  23.                     items={items2}
  24.                     onClick={onClick}
  25.                 />
  26.             </Sider>
  27.             <Content>
  28.                 {/*在这里打开页面*/}
  29.             </Content>
  30.         </Layout>
  31.     );
  32. };
英文:

I have a menu and the main body of the page. I have created different pages as components with some text. All I want is that when I click on the side bar menu, the components are displayed in the main page. How can I make this work?

  1. const items2 =  [{
  2.   label: &#39;Rice&#39;,
  3.   key: &#39;rice&#39;,
  4. },
  5. {
  6.   label: &#39;AB Test&#39;,
  7.   key: &#39;ab&#39;, 
  8. }]
  10. const MainLayout = () =&gt; {
  11.   const {
  12.     token: { colorBgContainer },
  13.   } = theme.useToken();
  15. const navigate = useNavigate();
  16. const onClick = (e)=&gt;{navigate(`/${e.key}`)}
  18.   return (
  19.     &lt;Layout&gt;
  20.          &lt;Sider &gt;
  21.             &lt;Menu
  22.               mode=&quot;inline&quot;
  23.               items={items2}
  24.               onClick = {onClick}
  26.             /&gt;
  27.           &lt;/Sider&gt;
  28.           &lt;Content &gt;

//I Want to open the pages here

  1.           &lt;/Content&gt;
  2.         &lt;/Layout&gt;
  3.       &lt;/Content&gt;

答案1

得分: 1

你需要使用react-router-dom在单击其他MenuItem时进行导航。创建你自己的RouterProvider并将其放入Content中。

  1. &lt;Content&gt;
  2.  &lt;RouterProvider router={router}&gt;
  3. &lt;/Content&gt;

编辑

现在你有两种方式可以导航到你的组件。第一种是使用Link并将其设置为你的标签。

  1. {
  2.   label: &lt;Link title="Rice" to="/rice"&gt;Rice&lt;/Link&gt;,
  3.   key: 'rice',
  4. }

第二种方式是使用hook useNavigate

  1. const navigate = useNavigate();
  2. const onClick = (e) => {navigate(`/${e.key}`)}
  3. //添加到菜单
  4. &lt;Menu
  5.   onClick={onClick}
  6. //其他属性
  7. /&gt;
英文:

You need to use react-router-dom to navigate when you click other MenuItem. Create your own RouterProvider and put it in the Content.

  1. &lt;Content&gt;
  2.  &lt;RouterProvider router={router}&gt;
  3. &lt;/Content&gt;

EDIT

Now you have two way to navigate to your Component. First is using Link and set it to your label.

  1. {
  2.   label: &lt;Link title=&quot;Rice&quot; to=&quot;/rice&quot;&gt;Rice&lt;/Link&gt;,
  3.   key: &#39;rice&#39;, 
  4. }

Second way is hook useNavigate

  1. const navigate = useNavigate();
  2. const onClick = (e)=&gt;{navigate(`/${e.key}`)}
  3. //Add to Menu
  4. &lt;Menu
  5.   onClick={onClick}
  6. //other props
  7. /&gt;

答案2

得分: 1

在React中，要在一个组件内部渲染另一个组件，React提供了一个特殊的props名称children。

要实现你的需求，你可以像这样做：

MainLayout.js：

  1. export const MainLayout = ({children}) => {
  2.   const {
  3.     token: { colorBgContainer },
  4.   } = theme.useToken();
  6.   const navigate = useNavigate();
  7.   const onClick = (e)=>{navigate(`/${e.key}`)}
  9.   return (
  10.     <Layout>
  11.       <Sider>
  12.         <Menu
  13.           mode="inline"
  14.           items={items2}
  15.           onClick={onClick}
  16.         />
  17.       </Sider>
  18.       <Content>
  19.         {children}
  20.       </Content>
  21.     </Layout>
  22.   )
  23. }

在MainLayout.js中，你只需要在<Content>组件内部写{children}，React会为你做剩下的事情，将Rice或AB或其他内容传递给你。在每个页面中，只需将<MainLayout>放在你的代码的外部顶部。

请看下面的两个示例文件。

Rice.js：

  1. import MainLayout from './MainLayout';
  3. export const Rice = () => {
  4.   // 在这里做一些事情...
  6.   return (
  7.     <MainLayout>
  8.       <div>
  9.         <h2>世界上最好吃的大米</h2>
  10.         <ol>
  11.           <li>Pinipig</li>
  12.           <li>Riz de Camargue</li>
  13.           ...
  14.         </ol>
  15.       <div>
  16.     </MainLayout>
  17.   )
  18. }

Corn.js：

  1. import MainLayout from './MainLayout';
  3. export const Corn = () => {
  4.   // 在这里做一些事情...
  6.   return (
  7.     <MainLayout>
  8.       <div>
  9.         <h2>最佳玉米配菜食谱</h2>
  10.         <ol>
  11.           <li>淡奶油玉米沙拉</li>
  12.           <li>经典烤玉米棒</li>
  13.           ...
  14.         </ol>
  15.       </div>
  16.     </MainLayout>
  17.   )
  18. }

你可以在React官方文档中阅读更多并尝试这个示例代码。

这是React的基本概念，所以在你开始构建大型项目之前，我建议你先阅读这些文档，或者找一些针对初学者的React教程系列，它们会解释React的关键概念，这样你就能节省更多时间。

英文:

To render a component inside other component, React provides a special props name children.

To achieve your requirement, you can do like this:

MainLayout.js:

  1. export const MainLayout = ({children}) =&gt; {
  2.   const {
  3.     token: { colorBgContainer },
  4.   } = theme.useToken();
  6.   const navigate = useNavigate();
  7.   const onClick = (e)=&gt;{navigate(`/${e.key}`)}
  9.   return (
  10.     &lt;Layout&gt;
  11.       &lt;Sider&gt;
  12.         &lt;Menu
  13.           mode=&quot;inline&quot;
  14.           items={items2}
  15.           onClick={onClick}
  16.         /&gt;
  17.       &lt;/Sider&gt;
  18.       &lt;Content&gt;
  19.         {children}
  20.       &lt;/Content&gt;
  21.     &lt;/Layout&gt;
  22.   )
  23. }

In MainLayout.js, you only need to write {children} inside component &lt;Content&gt;, React will do the rest for you to pass the content of Rice or AB or whatever for you. In each page, just place &lt;MainLayout&gt; at the top of the outer of rest of your code.

Please see 2 example files below.

Rice.js:

  1. import MainLayout from &#39;./MainLayout&#39;;
  3. export const Rice = () =&gt; {
  4.   // Do some stuffs here...
  6.   return (
  7.     &lt;MainLayout&gt;
  8.       &lt;div&gt;
  9.         &lt;h2&gt;Best rated rice in the World&lt;/h2&gt;
  10.         &lt;ol&gt;
  11.           &lt;li&gt;Pinipig&lt;/li&gt;
  12.           &lt;li&gt;Riz de Camargue&lt;/li&gt;
  13.           ...
  14.         &lt;/ol&gt;
  15.       &lt;div&gt;
  16.     &lt;/MainLayout&gt;
  17.   )
  18. }

Corn.js:

  1. import MainLayout from &#39;./MainLayout&#39;;
  3. export const Corn = () =&gt; {
  4.   // Do some stuffs here...
  6.   return (
  7.     &lt;MainLayout&gt;
  8.       &lt;div&gt;
  9.         &lt;h2&gt;Best Corn Side Dish Recipes&lt;/h2&gt;
  10.         &lt;ol&gt;
  11.           &lt;li&gt;Whipped-Cream Corn Salad&lt;/li&gt;
  12.           &lt;li&gt;Classic Grilled Corn on the Cob&lt;/li&gt;
  13.           ...
  14.         &lt;/ol&gt;
  15.       &lt;div&gt;
  16.     &lt;/MainLayout&gt;
  17.   )
  18. }

You can read more and play around with the example code from React's official documents.

It is the basic concept of React, so before you start to build something big, I suggest to follow this docs first or find some series of React tutorials for beginner, they will explain key concepts of React so you would not save more time.

huangapple
  • 本文由 发表于 2023年2月8日 09:10:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/75380490.html
  • antd
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定