突出显示映射项目中的列表项

时间:2017-09-19 22:10:09

标签: javascript list reactjs state

我试图在悬停时突出显示li元素,如果点击它则保持颜色。我只能通过CSS这样做:



.Side-menu-link:active {
  text-decoration: none;
  color: #27B872;
}




但它只是图标而不是整个li方块。

这是父组件:



export default class Nav extends Component {
  render() {
    return (
      <div className='Side-bar'>
        <ul className='Side-menu'>
          <NavItems />
        </ul>
      </div>
    );
  }
}
&#13;
&#13;
&#13;

这是我的带有li元素的子组件:

&#13;
&#13;
const topNavItems = [
  {
    route: '/shoppingCart',
    name: 'shop',
  },
  {
    route: '/admin',
    name: 'key',
  },
];

export default class NavItems extends Component {
  render() {
    return (
      <div>
        {
          topNavItems.map((tn) => {
            return (
              <li key={tn.name}><NavLink className='Side-menu-link' to={tn.route}><Icon name={tn.name} /></NavLink></li> //eslint-disable-line
            );
          })
        }
      </div>
    );
  }
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

添加了以下CSS来修复此

Assembly assm = Assembly.Load("AssemblyName");
object instance = assm.CreateInstance("ClassName");
object retVal = instance.GetType().GetMethod("NewMethod").Invoke(instance, null);