Блог

Я не могу передать имя класса от родительского компонента к дочернему компоненту. Кажется, ничего из того, что я пробовал, не работает.

 import React from 'react';
import NavbarItem from './NavbarItem/NavbarItem';
import classes from './NavbarItems.module.scss';

const NavbarItems = (props) => (
    <ul className={classes.NavbarItems}>
        <NavbarItem classname="AboutUs" link="about-us">about us</NavbarItem>
        <NavbarItem classname="Services" link="services">services</NavbarItem>
        <NavbarItem classname="Gallery" link="gallery">gallery</NavbarItem>
        <NavbarItem classname="Contacts" link="contacts">contacts</NavbarItem>
    </ul>
);

export default NavbarItems;

  

 import React, { Component } from 'react';
import classes from './NavbarItem.module.scss';


class NavbarItem extends Component {
    constructor(props){
        super(props)
    }
    render () {
        const {classname, link, children} = this.props;

        return (
            <li className={classes.NavbarItem}>
                <a className={classes.classname} href={link}>{children}</a>
            </li>
        );
    }
}

export default NavbarItem;



  

Я пытаюсь получить определенный класс для тега. Я могу удалить классы, но если я это сделаю, я не смогу использовать определенные scss, которые у меня есть для файла.

Как я понимаю, вам нужно добавить className тег привязки к тому, что вы получаете от родителя. Попробуйте это:

 <a className={classes[classname]} href={link}>{children}</a>
  

Здесь классы — это то, что вы импортировали из файла scss, classname и это класс, который вы получаете в реквизитах от родительского компонента