Reactjs：将侧边栏组件导入到不同的页面

Question

我没有反应的经验，我正在尝试通过做/构建来自学。我想在我网站的页面上添加一个侧边栏。但是，我所有的研究都导致了将侧边栏添加到主页的文章和教程。我不希望它出现在主页上，只需要一页。我想要的外观是Strip API documentation page：

如果我可以在页面上获得侧边栏，那么我可以尝试按照我喜欢的方式对其进行样式设置。以下是我的文件。

组件 Sidebar.js

import React, { Component } from "react";
import '../Styles/sidebar.css'


class Sidebar extends Component {
    render() {
        return(
            <div className="sidebar">
            <h1> I'm the sidebar</h1>
            </div>
        );
    }
}
export default Sidebar;

我想把侧边栏放在“Developer.js”上的页面：

import React from 'react';
import Sidebar from './components/Sidebar' 
import './Styles/sidebar.css'


export const Developers = () => (
    <div>
        <Sidebar />
        <h1> Documentation </h1>
    <div>

export default Developers; 

我对 sidebar.css 的看法：

.sidebar-container{
    min-height: 100vh;
    background-color: lightgray;
  }
  .sidebar {
    width: 200px;
    padding-top: 25px;
  }

  .sidebar-link{
    padding: 10px;
  }

  .sidebar-link:hover{
    border-right: 5px solid dimgray;
    background-color: gainsboro;
  }

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <NavigationBar />
        <Layout>
          <Router>
            <Switch>
              <Route exact path = "/" component={Home} />
              <Route path="/developers" component = {Developers} />
              <Route component={NoMatch} /> 
            </Switch>
          </Router>
        </Layout>
      </React.Fragment>
    );
  }
}


export default App;

添加 css 文件后，I'm the sidebar 将显示在 Documentation 的正上方

它不在“侧边栏”中，我错过了什么？

Answer 1

是的，首先是您的组件配置不正确。修复它很容易。让我们从sidebar.js开始。

//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar-container">
        <div className="sidebar">
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
        </div>
      </div>
    );
  }
}

//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";

class Developer extends Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <Sidebar />
        <h1>Developer Page</h1>
      </div>
    );
  }
}

export default Developer;

此外，在您的 App.js 文件中，您正在导入命名组件。这就是您没有获得所需输出的原因。如果您要导入命名组件，您也必须以相同的方式导出它们。目前，您将它们作为默认值导出，因此在导入它们时不需要花括号。

//App.js
import  Home  from './Home';
import  Developers  from './Developer';
import  NoMatch  from './NoMatch';

更新：将此文件导入到您的 sidebar.js 中，例如 import ./style.css。我已经更新了sidebar.js 文件的代码。请检查。

//style.css
.sidebar-container{
    min-height: 100vh;
    background-color: lightgray;
  }
  .sidebar {
    width: 200px;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
  }

  .sidebar-link{
    padding: 10px;
  }

  .sidebar-link:hover{
    border-right: 5px solid dimgray;
    background-color: gainsboro;
  }

Answer 2

首先，您的 Sidebar 组件可以简化为功能组件：

// Sidebar.js

import React from "react";

export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;

其次，在您的开发者页面中，您可以删除侧边栏组件，因为您已经拥有它并且正在正确导入它。接下来，将其添加到您的 Developers 组件中：

// Developers.js

import React from "react";
import { Sidebar } from "./components/Sidebar";

export const Developers = () => (
    <div>
        <Sidebar />
        <h1> Documentation </h1>
    <div>
);

这假设您具有以下文件夹结构以确保您的导入正常工作：

src/
   app.js
   Developers.js
   components/
      Sidebar.js