Javascript 更换和重新加载部件侧菜单

我创建了Workplace10组件，并尝试使用侧菜单组件从workplace1组件获取数据

在侧菜单中，如果单击workplace 10 li component loading workplace component 10，我已经创建了workplace 10 components，但我看不到侧菜单中选择了哪个组件

…请参考此链接中的我的代码

这是工作场所组件

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>
    );
  }
}

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>
    );
  }
}

class WorkPlace1扩展组件{
render（）{
返回(
工作地点1
);
}
}

这是workplace2组件

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>
    );
  }
}

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>
    );
  }
}

class WorkPlace2扩展组件{
render（）{
返回(
工作场所2
);
}
}

这是侧菜单组件

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>
    );
  }
}

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>
    );
  }
}

class Home扩展组件{
render（）{
返回(

工作地点1
工作场所2
工作地点3
工作场所4
工作场所5
工作场所6
工作场所7
工作场所8
工作地点9
工作场所10

);
}
}

当用户单击链接时，必须保存当前活动工作区的状态。然后使用state值可以在每个

元素上添加活动类。 您的侧菜单组件应如下所示：

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>
);

---

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

在每个workplace页面中呈现侧菜单的单独实例，因此在导航到新路由时卸载每个实例，并装载新实例。这不是很干燥。建议您将代码配置为仅在路由器中装载/呈现一个单面菜单，这样可以避免相同组件的卸载/装载周期。还请注意，

开关的删除

，因为它不允许多个匹配（仅允许第一个匹配，而不是任何匹配）

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组件中，表行/列被删除，因为路由器现在定义了空间

WorkPlace.jsx

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

class WorkPlace1扩展组件{
render（）{
返回(
工作地点1
);
}
}

---

下面的演示演示了上述内容，但我认为更好的解决方案涉及使用显示网格和可分配网格区域，因为表（行/列）通常没有那么灵敏（尽管快速浏览

react grid system

意味着它有点灵活）。能够将组件分配到网格区域，无需将

行

&

列

与路由器逻辑混合。

感谢您的回答…但我的问题是…请查看代码沙盒链接…其替换组件问题…当我想查看workplace 10 li的数据时…整个组件都已替换…我无法在侧菜单中看到li元素的选定项…在侧菜单中滚动后，我再次可以看到workplace1、workplace2…等…然后我可以看到workplace10已选择Hi Drew Reese。。。查看此链接并说明如何在当前页面中打开对话框。请…谢谢谢洛·德鲁·里斯…请帮我回答这些问题…我已经把问题贴在了堆栈上了。。。。。。。。