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>
    );
 }
}

如何基于a道具更改target元素样式？
例如：如果为target="home-link"，则带有a的{{1}}元素的文本带有下划线，而另一个id="home-link"元素的文本没有下划线。

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道具，该道具适用只要当前位置（URL）与NavLink的to道具（类似于a标签的href）相匹配，就给定className。

Answer 2

将菜单数据保存到variable中。
使用map添加a标签
在与目标匹配的className = 'active'上设置a。
然后编写CSS以添加下划线。

HeaderMenu.js

class HeaderMenu extends React.Component {

 constructor(props) {
     super(props);
     this.menus = [
       { id: 'home-link', name: 'Home' },
       { id: 'project-link', name: 'Projests' },
       // ...
     ];
}

 render() {
    return(
        <nav className="header-menu">
            {
              this.menus.map(menu => (<a id={menu.id} className={this.props.target === menu.id ? 'active' : ''}>{menu.name}</a>))
            }
        </nav>
    );
 }

}

css：

.active {
   // text style when active
}

根据道具更改react组件的样式

2 个答案: