Блог

Я очень новичок в ReactJS и пытаюсь создать простую строку меню. Мое меню работает на моем ноутбуке, но на мобильном устройстве оно не меняет цвет активного меню. Если я помещаю пункт меню непосредственно в render (), он работает (см. Пункт меню «РАБОЧИЙ»), но моя первоначальная идея не меняет фон меню на мобильных телефонах. Я понятия не имею, почему. Спасибо за чтение.

 import React, {Component} from 'react'
import './menu-main.sass';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
}   from "react-router-dom";

const MenuButton = (props) => {
    return (
        <li className={props.className} onClick={props.onClick}>
            <Link to={'/'   props.route}>{props.name}</Link>
        </li>
    );
}

const menus = [
    {id: 0, name: 'Products', route: 'products'},
    {id: 1, name: 'Categories', route: 'category'},
    {id: 2, name: 'About', route: 'about'},
]

class Menu extends Component {
    constructor(){
        super();
        this.state = {
            activeMenu: 0,
        }       
    }

    handleClick(i) {
        this.setState({
            activeMenu: i 
        })
    }

    renderMenuButton(i) {
        let className = "button"
        
        if (this.state.activeMenu == i) {
            className = "active-menu"
        } 
                
        return (
            <MenuButton 
                key = {menus[i].id}
                name = {menus[i].name}
                route = {menus[i].route}
                id = {menus[i].id}
                onClick={() => this.handleClick(i)}
                className = {className}
            />
        );
    }
    
    renderSwitch(i) {
        return (
            <Route path = {menus[i].route} key = {menus[i].id}>
                {'<'   menus[i].route   ' />'}
            </Route>
        );
    }
    
    render() {
        return (
            <Router>
                <div className="container-menu-main">
                    <ul>
                        <li>Admin menu</li>
                        <li onClick={() => this.handleClick(2)}>WORKING!!!</li>
                        {menus.map((menu) => this.renderMenuButton(menu.id))} {/* DOES NOT WORK */}
                    </ul>
                    <Switch>
                        {menus.map((menu) => this.renderSwitch(menu.id))}
                    </Switch>                   
                </div>
            </Router>
        )
    }
    
}

export default Menu;
  

Я обнаружил, что существует проблема с шириной CSS. На мобильных устройствах активным цветом будет: цвет наведения, и если я удалю цвет наведения или установлю такой же, как активный цвет, он будет работать нормально. Я не знаю, почему, и мне это не нравится, потому что я не понимаю.

С другой стороны, я понял, что в react router есть встроенное решение для active link, поэтому мне не нужно управлять самим.

Вы переходите menu.id к this.renderMenuButton , но, похоже this.renderMenuButton , ожидает индекс. Можете ли вы попробовать это:

 import React, {Component} from 'react'
import './menu-main.sass';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
}   from "react-router-dom";

const MenuButton = (props) => {
    return (
        <li className={props.className} onClick={props.onClick}>
            <Link to={'/'   props.route}>{props.name}</Link>
        </li>
    );
}

const menus = [
    {id: 0, name: 'Products', route: 'products'},
    {id: 1, name: 'Categories', route: 'category'},
    {id: 2, name: 'About', route: 'about'},
]

class Menu extends Component {
    constructor(){
        super();
        this.state = {
            activeMenu: 0,
        }       
    }

    handleClick(i) {
        this.setState({
            activeMenu: i 
        })
    }

    renderMenuButton(i) {
        let className = "button"
        
        if (this.state.activeMenu == i) {
            className = "active-menu"
        } 
                
        return (
            <MenuButton 
                key = {menus[i].id}
                name = {menus[i].name}
                route = {menus[i].route}
                id = {menus[i].id}
                onClick={() => this.handleClick(i)}
                className = {className}
            />
        );
    }
    
    renderSwitch(i) {
        return (
            <Route path = {menus[i].route} key = {menus[i].id}>
                {'<'   menus[i].route   ' />'}
            </Route>
        );
    }
    
    render() {
        return (
            <Router>
                <div className="container-menu-main">
                    <ul>
                        <li>Admin menu</li>
                        <li onClick={() => this.handleClick(2)}>WORKING!!!</li>
                        {menus.map((menu, i) => this.renderMenuButton(i))} {/* Pass index instead of menu.id */}
                    </ul>
                    <Switch>
                        {menus.map((menu) => this.renderSwitch(menu.id))}
                    </Switch>                   
                </div>
            </Router>
        )
    }
    
}

export default Menu;