使用response js为菜单列表中的项目设置转盘。

itemsCarousel因为没有滚动到第一项…如果试图看到第三项,我可以看到第一项将出现在列表中,我无法看到第三项是活动的或没有…因为我试图使用 itemsCarousel的菜单列表,我有超过10个选项。https:/codesandbox.iosstill-pine-kl9jb?file=srcmain-menu.js:0-939。

app.js

import React from "react";
import "./styles.css";
import { Route, BrowserRouter } from "react-router-dom";
import { Col, Row } from "react-grid-system";
import firstCard from "./menu/firstcard";
import secondCard from "./menu/secondcard";
import thridCard from "./menu/thirdCard";
import fouthCard from "./menu/fourthcard";
import fifthCard from "./menu/fifthcard";

import cardone from "./secondMenu/card-one";
import cardtwo from "./secondMenu/card-two";
import cardthree from "./secondMenu/card-three";
import cardfour from "./secondMenu/card-four";
import cardfive from "./secondMenu/card-five";

import itemone from './thirdMenu/itemOne'
import itemtwo from './thirdMenu/itemTwo'
import itemthree from './thirdMenu/itemThree'
import itemfour from './thirdMenu/itemFour'

import MainMenu from "./main-menu";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Row>
          <Col sm={12} xs={12}>
            <Route exact path="/">
              <MainMenu />
            </Route>
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/" component={firstCard} />
            <Route exact path="/" component={secondCard} />
            <Route exact path="/" component={thridCard} />
            <Route exact path="/" component={fouthCard} />
            <Route exact path="/" component={fifthCard} />
          </Col>
        </Row>
        <Row>
          <Col sm={12} xs={12}>
            <Route exact path="/secondmenu">
              <MainMenu />
            </Route>
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/secondmenu" component={cardone} />
            <Route exact path="/secondmenu" component={cardtwo} />
            <Route exact path="/secondmenu" component={cardthree} />
            <Route exact path="/secondmenu" component={cardfour} />
            <Route exact path="/secondmenu" component={cardfive} />
          </Col>
        </Row>

        <Row>
          <Col sm={12} xs={12}>
            <Route exact path="/thirdmenu">
              <MainMenu />
            </Route>
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/thirdmenu" component={itemone} />
            <Route exact path="/thirdmenu" component={itemtwo} />
            <Route exact path="/thirdmenu" component={itemthree} />
            <Route exact path="/thirdmenu" component={itemfour} />
          </Col>
        </Row>
      </BrowserRouter>
    </div>
  );
}

主菜单.js

import React, { useState } from "react";
import './styles.css'
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 exact activeClassName="activeclass" to="/">Menu</NavLink>
        <NavLink activeClassName="activeclass" to="/secondmenu">Second Menu</NavLink>
        <NavLink activeClassName="activeclass" to="/thirdmenu">Third Menu</NavLink>
       </ItemsCarousel>
    </div>
  );
};

解决方案:

我不太了解 “表格 “的行和列的布局,但移动 “导航 “菜单,我想知道为什么会有这样的效果。 途径的,并且刚刚渲染到 Router 解决了每个 “页面 “都有一个副本并在加载时重新初始化的问题。这就是为什么你看到它在向右滚动并点击第三个菜单后 “啪 “的一声回到显示第一个菜单的原因。

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Row>
          <Col sm={12} xs={12}>
              <MainMenu /> // render outside a route so it is always just there
            {/* <Route exact path="/">
              <MainMenu />
            </Route> */}
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/" component={firstCard} />
            <Route exact path="/" component={secondCard} />
            <Route exact path="/" component={thridCard} />
            <Route exact path="/" component={fouthCard} />
            <Route exact path="/" component={fifthCard} />
          </Col>
        </Row>
        <Row>
          <Col sm={12} xs={12}>
            {/* <Route exact path="/secondmenu">
              <MainMenu />
            </Route> */}
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/secondmenu" component={cardone} />
            <Route exact path="/secondmenu" component={cardtwo} />
            <Route exact path="/secondmenu" component={cardthree} />
            <Route exact path="/secondmenu" component={cardfour} />
            <Route exact path="/secondmenu" component={cardfive} />
          </Col>
        </Row>

        <Row>
          <Col sm={12} xs={12}>
            {/* <Route exact path="/thirdmenu">
              <MainMenu />
            </Route> */}
          </Col>
          <Col sm={12} xs={12}>
            <Route exact path="/thirdmenu" component={itemone} />
            <Route exact path="/thirdmenu" component={itemtwo} />
            <Route exact path="/thirdmenu" component={itemthree} />
            <Route exact path="/thirdmenu" component={itemfour} />
          </Col>
        </Row>
      </BrowserRouter>
    </div>
  );
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

Flutter:使用子部件更新一个值

2022-9-8 18:58:29

未分类

将URL用户中的字符+替换为-。

2022-9-8 19:04:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索