更换和重新加载组件侧面菜单

Question

我创建了工作场所 10 组件并尝试使用侧菜单组件从工作场所 1 组件获取数据。

在侧边菜单中，如果单击workplace10th li 组件加载workspace 组件10，我已经创建了workplace 10 组件，但是我看不到在侧边菜单中选择了哪个组件

...请在此链接中参考我的代码https://codesandbox.io/s/fervent-http-ijbiz

这是工作场所组件

class WorkPlace1 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 1</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

这是workplace2组件

class WorkPlace2 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 2</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

这是侧边菜单组件

class Home extends Component {
  render() {
    return (
      <div>
        <ul className="side-menu-ul-data">
          <NavLink exact to="/workplaces/workplace1">
            <li>Work Place 1</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace2">
            <li>Work Place 2</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace3">
            <li>Work Place 3</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace4">
            <li>Work Place 4</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace5">
            <li>Work Place 5</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace6">
            <li>Work Place 6</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace7">
            <li>Work Place 7</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace8">
            <li>Work Place 8</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace9">
            <li>Work Place 9</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace10">
            <li>Work Place 10</li>
          </NavLink>
        </ul>
      </div>
    );
  }
}

Answer 1

您在每个工作场所页面内呈现一个单独的侧边菜单实例，因此每个实例在导航到新路线时都会被卸载并安装新实例。这不是很干燥。建议将您的代码配置为仅在路由器中安装/渲染 ONE 单侧菜单，这样可以避免相同组件的卸载/安装周期。还要注意 Switch 的删除，因为这不允许多个匹配项（仅第一个匹配项，而不是任何匹配项）。

App.jss

<Router>
  <Header />

  // top level routes
  <Route exact path="/" component={Home} />
  <Route exact path="/workplaces" component={WorkPlace1} />
  <Route exact path="/services" component={Services} />
  <Route exact path="/experiments" component={Experiments} />
  <Route exact path="/contacts" component={Contact} />

  // "nested" sub-routes
  <Row>
    <Col sm={4}>
      // always render side menu on "workplaces" sub-routes (no exact prop)
      <Route path="/workplaces">
        <SideMenu />
      </Route>
    </Col>
    <Col sm={5}>
      <Route exact path="/workplaces/workplace1" component={WorkPlace1} />
      <Route exact path="/workplaces/workplace2" component={WorkPlace2} />
      <Route exact path="/workplaces/workplace3" component={WorkPlace3} />
      <Route exact path="/workplaces/workplace4" component={WorkPlace4} />
      <Route exact path="/workplaces/workplace5" component={WorkPlace5} />
      <Route exact path="/workplaces/workplace6" component={WorkPlace6} />
      <Route exact path="/workplaces/workplace7" component={WorkPlace7} />
      <Route exact path="/workplaces/workplace8" component={WorkPlace8} />
      <Route exact path="/workplaces/workplace9" component={WorkPlace9} />
      <Route
        exact
        path="/workplaces/workplace10"
        component={WorkPlace10}
      />
    </Col>
  </Row>
</Router>

在工作区组件中，表格行/列被删除，因为路由器现在定义了空间。

WorkPlace.jsx

class WorkPlace1 extends Component {
  render() {
    return (
      <div>Work Place 1</div>
    );
  }
}

以下codesandbox 演示了上述内容，但我认为更好的解决方案涉及使用显示网格和可分配的网格区域，因为表格（行/列）通常没有那么响应（尽管快速浏览react-grid-system 意味着它有点灵活）。能够将组件分配给网格区域，无需将 Row 和 Col 与路由器逻辑混合。

Answer 2

当用户点击链接时，您必须保存当前活动工作场所的状态。然后使用状态值，您可以在每个<li>element 上添加活动类。 您的侧边菜单组件应如下所示：

class Home extends Component {
   state = {
      activeWorkPlace: 1,
   }

   setActiveWorkplace = (activeWorkPlace) => {this.setState({activeWorkPlace})};

  render() {
      return (
        <div>
           <ul className="side-menu-ul-data">
           <NavLink onClick={this.setActiveWorkplace.bind(this, 1)}  exact to="/workplaces/workplace1">
              <li className={this.state.activeWorkPlace === 1? 'active': ''}>Work Place 1</li>
           </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 2)} exact to="/workplaces/workplace2">
              <li className={this.state.activeWorkPlace === 2? 'active': ''}>Work Place 2</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 3)} exact to="/workplaces/workplace3">
              <li className={this.state.activeWorkPlace === 3? 'active': ''}>Work Place 3</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 4)} exact to="/workplaces/workplace4">
               <li className={this.state.activeWorkPlace === 4? 'active': ''}>Work Place 4</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 5)} exact to="/workplaces/workplace5">
               <li className={this.state.activeWorkPlace === 5? 'active': ''}>Work Place 5</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 6)} exact to="/workplaces/workplace6">
               <li className={this.state.activeWorkPlace === 6? 'active': ''}>Work Place 6</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 7)} exact to="/workplaces/workplace7">
               <li className={this.state.activeWorkPlace === 7? 'active': ''}>Work Place 7</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 8)} exact to="/workplaces/workplace8">
                <li className={this.state.activeWorkPlace === 8? 'active': ''}>Work Place 8</li>
      </NavLink>
          <NavLink onClick={this.setActiveWorkplace.bind(this, 9)} exact to="/workplaces/workplace9">
              <li className={this.state.activeWorkPlace === 9? 'active': ''}>Work Place 9</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 10)} exact to="/workplaces/workplace10">
               <li  className={this.state.activeWorkPlace === 10? 'active': ''}>Work Place 10</li>
      </NavLink>
    </ul>
  </div>
);

} }

并将此样式添加到您的 style.css 文件中：

.active {
    color: red;
}

这应该可以解决您的问题。