javascript - 根据 React 组件的 props 改变其样式

Question

我有一个 Header.js:

const Header = () => {
 return (
  <header className="header">
    <Logo/>
    <HeaderMenu target="home-link"/>
  </header>);
}

和一个HeaderMenu.js:

class HeaderMenu extends React.Component {
 render() {
    return(
        <nav className="header-menu">
            <a id="home-link">Home</a>
            <a id="project-link">Projects</a>
            <a id="blog-link">Blog</a>
            <a id="about-me-link">About Me</a>
        </nav>
    );
 }
}

如何根据 target 属性更改 a 元素样式？
示例:如果 target="home-link"，则带有 id="home-link" 的 a 元素的文本带有下划线，另一个元素的文本带有下划线a 元素没有。

Answer 1

您可以通过将类应用到您想要以不同方式设置样式的任何元素来实现此目的。在为当前页面的链接提供不同样式的示例中，您可以迭代链接并为 id 与目标匹配的链接提供“事件”类。

例如:

class HeaderMenu extends React.Component {
 render() {
    const { target } = this.props;

    const linkData = [
        {id: "home-link", title: "Home"},
        {id: "project-link", title: "Projects"},
        {id: "blog-link", title: "Blog"},
        {id: "about-me-link", title: "About Me"},
    ];
    const linkElements = linkNames.map(e => (
        <a id={ e.id } className={ e.id === target ? "active" : "" }>{ e.title }</a>
    ));

    return(
        <nav className="header-menu">
            { linkElements }
        </nav>
    );
 }
}

但是，如果您使用 React Router (您可能希望这样做，以便单击链接时页面不会刷新)<NavLink>组件采用 activeClassName prop，只要当前位置(url)与 NavLink 的 to 匹配，它就会应用给定的 className prop(类似于 a 标签的 href )。