时间戳

首页 > 解决方案 > React pro 侧边栏使用

javascript - React pro 侧边栏使用

问题描述

我开始在 React 中编码，我想使用 react-pro-sidebar：https ://www.npmjs.com/package/react-pro-sidebar

我准确地说这是我第一次使用这样的包。我按照说明在 App.js 中编写了以下代码：

import classes from './App.module.css';
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';

<ProSidebar>
  <Menu iconShape="square">
    <MenuItem>Dashboard</MenuItem>
    <SubMenu title="Components">
      <MenuItem>Component 1</MenuItem>
      <MenuItem>Component 2</MenuItem>
    </SubMenu>
  </Menu>
</ProSidebar>;

class App extends Component {

  render() {
    return (
      <div className={classes.App}>
        <ProSidebar/>
      </div>
    );
  }
}

export default App;

为什么此代码未在我的应用程序上显示侧边栏？我应该怎么做才能显示侧边栏？

非常感谢您的回答，我相信这应该很明显，但它不适合我，您的回答将帮助我更多地了解它是如何工作的。

非常感谢您的帮助 ：）

标签： javascriptreactjs

解决方案

好像你对 React 不是很熟悉，这就是为什么你只是盲目地遵循文档。他们刚刚编写了导入部分和 JSX 部分，而没有展示它被包装到 React 类中时的外观

检查固定代码：

import React, { Component } from "react"
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';

const sidebar = <ProSidebar>
  <Menu iconShape="square">
    <MenuItem>Dashboard</MenuItem>
    <SubMenu title="Components">
      <MenuItem>Component 1</MenuItem>
      <MenuItem>Component 2</MenuItem>
    </SubMenu>
  </Menu>
</ProSidebar>;

class App extends Component {

  render() {
    return (
      <div>
        {sidebar}
      </div>
    );
  }
}

export default App;

推荐阅读