Question

您好，此项目有任何帮助吗？轮播，用于不滚动到第一项。.如果尝试查看第三项，我可以看到第一项再次出现在列表中，我看不到第三项处于活动状态或不是....因为我正尝试使用itemsCarousel作为菜单列表，所以我有10多个选项。我已经在condesandox中开发了示例项目，这是链接https://codesandbox.io/s/modest-meitner-vy00p

app.js

import React from "react";
import "./styles.css";
import { Route, BrowserRouter } from "react-router-dom";
import MenuOne from "./menu-one";
import MenuTwo from "./menu-two";
import MenuThree from "./menu-three";
import MenuFour from "./menu-four";
import MenuFive from "./menu-five";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route exact path="/" component={MenuOne} />
        <Route exact path="/menu-two" component={MenuTwo} />
        <Route exact path="/menu-three" component={MenuThree} />
        <Route exact path="/menu-four" component={MenuFour} />
        <Route exact path="/menu-five" component={MenuFive} />
      </BrowserRouter>
    </div>
  );
}

menu.js

import React, { useState } from "react";
import ItemsCarousel from "react-items-carousel";
import { NavLink } from "react-router-dom";

export default () => {
  const [activeItemIndex, setActiveItemIndex] = useState(0);
  const chevronWidth = 40;
  return (
    <div style={{ padding: `0 ${chevronWidth}px` }}>
      <ItemsCarousel
        requestToChangeActive={setActiveItemIndex}
        activeItemIndex={activeItemIndex}
        numberOfCards={2}
        gutter={20}
        leftChevron={<button>{"<"}</button>}
        rightChevron={<button>{">"}</button>}
        outsideChevron
        chevronWidth={chevronWidth}
      >
        <NavLink to="/">Menu One</NavLink>
        <NavLink to="/menu-two">Menu Two</NavLink>
        <NavLink to="/menu-three">Menu Three</NavLink>
      </ItemsCarousel>
    </div>
  );
};

menu-one.js

import React, { Component } from "react";
import Menu from "./menu";

export default class MenuOne extends Component {
  render() {
    return (
      <div>
        <Menu />
        <div>This is Menu One</div>
      </div>
    );
  }
}

菜单二

import React, { Component } from "react";
import Menu from "./menu";

export default class MenuTwo extends Component {
  render() {
    return (
      <div>
        <Menu />
        <div>This is Menu Two</div>
      </div>
    );
  }
}

菜单三

import React, { Component } from "react";
import Menu from "./menu";

export default class MenuThree extends Component {
  render() {
    return (
      <div>
        <Menu />
        <div>This is Menu Three</div>
      </div>
    );
  }
}

Answer 1

问题：每页上都会显示一个新菜单（未安装旧菜单）。每次显示时都带有初始“状态”

解决方案：将“导航”菜单移出每个组件并移入路由器。这样一来，它就可以为所有页面/路由转换保持安装状态。

App.js

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Menu />
        <Route exact path="/" component={MenuOne} />
        <Route exact path="/menu-two" component={MenuTwo} />
        <Route exact path="/menu-three" component={MenuThree} />
        <Route exact path="/menu-four" component={MenuFour} />
        <Route exact path="/menu-five" component={MenuFive} />
      </BrowserRouter>
    </div>
  );
}

Menu.js-为活动链接提供activeClassName或内联样式

<NavLink activeClassName="activeLink" exact to="/"> // <-- specify exact prop here else it will match all routes!
  Menu One
</NavLink>
<NavLink activeClassName="activeLink" to="/menu-two">
  Menu Two
</NavLink>
<NavLink activeClassName="activeLink" to="/menu-three">
  Menu Three
</NavLink>
<NavLink activeClassName="activeLink" to="/menu-four">
  Menu Four
</NavLink>
<NavLink activeClassName="activeLink" to="/menu-five">
  Menu Five
</NavLink>

CSS

.activeLink {
  color: red;
  font-weight: bold;
}

物品轮播反应

1 个答案: