Question

我无法将类名从父级传递给子级组件。我尝试过的一切似乎都没有效果。

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。

Answer 1

就我所知，您需要添加className来锚定从父级获得的内容。试试这个：

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

这是您从scss文件导入的类，classname是您从父项获得道具的条件

如何将类名从父级传递给子级组件

1 个答案: