📅 最后修改于: 2022-03-11 15:03:09.837000 🧑 作者: Mango
代码示例1
import React, { Component } from 'react';import ScrollMenu from 'react-horizontal-scrolling-menu';import './App.css'; // list of itemsconst list = [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' }, { name: 'item4' }, { name: 'item5' }, { name: 'item6' }, { name: 'item7' }, { name: 'item8' }, { name: 'item9' }]; // One item component// selected prop will be passedconst MenuItem = ({text, selected}) => { return {text}
;}; // All items component// Important! add unique keyexport const Menu = (list, selected) => list.map(el => { const {name} = el; return
; }); const Arrow = ({ text, className }) => { return (
{text} );}; const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });const ArrowRight = Arrow({ text: '>', className: 'arrow-next' }); const selected = 'item1'; class App extends Component { constructor(props) { super(props); // call it again if items count changes this.menuItems = Menu(list, selected); } state = { selected }; onSelect = key => { this.setState({ selected: key }); } render() { const { selected } = this.state; // Create menu from items const menu = this.menuItems; return (