Question

我像这样配置react-router：

<Route path="/" component={App}>
    <Route path="product">
        <Route path="list" component={ProductListPage}/>
    </Route>
    <Route path="priceReview">
        <IndexRoute component={PriceReviewPage}/>
    </Route>
</Route>

App这样的容器：

<div>
    <SideBar curId="index" />

    <div className="layout-content">
        {this.props.children}
    </div>
</div>

SideBar喜欢这个

const data: Item[] = [
    { id: "index", desc: "Home", href: "/" },
    { id: "product-manage", desc: "product manager", href: "/product" },
];
export const SideBar = ({ curId }) => (
    <div className="sidebar-nav"><h1 />
        <ul>
            {
                data.map((item) => (
                    <li key={item.id} className={curId === item.id ? "active" : ""}>
                        {
                            item.isOld === true ?
                                <a href={item.href}><i className="fa fa-home"/><span
                                    className="hidden-tablet">{item.desc}</span></a>
                                :
                                <Link to={item.href}><i className="fa fa-home"/><span
                                    className="hidden-tablet">{item.desc}</span></Link>
                        }
                    </li>
                ))
            }
        </ul>
    </div>
);

点击active时，我想要设置Link className：

 <li key={item.id} className={curId === item.id ? "active" : ""}>

所以我必须设置curId，但如何设置curId？

Answer 1

我建议你在你的＆lt;里面使用li＆gt;，＆lt;链接/＆gt;来自react-router的组件，您可以在其中传递activeClassName道具中的自定义样式以及“classnames”库：https://github.com/JedWatson/classnames。

示例：

import classNames from 'classnames';
render(){ //in your render

  return (

   <div className="sidebar-nav"><h1 />
    <ul>
        {
            data.map((item) => (
                <li key={item.id}>
                  <Link to={item.href} activeClassName={classNames({"active": this.props.curId === item.id})}><i className="fa fa-home"/><span
                            className="hidden-tablet">{item.desc}</span></Link>
                </li>
            ))
        }
    </ul>
   </div>
  );
}

如何在react-router中设置params？

1 个答案: