Question

我正在尝试动态设置React元素的样式：在导航栏中，我想使显示当前页面的<div>的字体颜色与代表其他<div>的字体颜色不同其他页面。我已经将代表当前页面的params传递到我的<NavBar>组件的道具中。

根据这些信息，我找到了实现我想要做的事情的方法：我将表示页面链接的<div>存储在一个对象中，并将所选页面包装在另一个<div>中携带'选定'级别的名字。

但是，我可以设想这种解决方案会破坏样式的场景，因为它添加了一个包装元素，并且包装元素中的类优先于'selected'类。

有谁知道更好的方法吗？我已经发布了我的解决方案和上下文：

export default class NavBar extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const pages = {
      my_subscribed_docs:
        <div className='nav__row2-item'>Documents I'm Subscribed To</div>,
      my_created_docs:
        <div className='nav__row2-item'>Documents I've Created</div>,
      new_doc:
        <div className='nav__row2-item'>
          <div className="plus-icon">+</div>
          <div className='nav__row2-text_left-of-icon'>New Document</div>
        </div>,
    };

    const currentPage = this.props.path.slice(1);
    pages[currentPage] =
      <div className='nav__row2-item--selected'>{pages[currentPage]}</div>;
    debugger;

    return (
        <nav>
          <div className="nav__row1">
            <div className="nav__logo">Worksheet Generator</div>
            <div style={{cursor: 'pointer'}} onClick={this.props.logout}>
              Logout
            </div>
          </div>
          <div className="nav__row2" >
            { Object.values(pages).map( page => (
              <div key={shortid.generate()}>{page}</div>)
            ) }
          </div>
        </nav>
    );
  }

}

Answer 1

如果要向组件动态添加class，建议您使用classnames库。在使用外部样式表时，这几乎就是这样做的。

动态设计React元素

1 个答案: