メニューのリンクコンポーネントの1つを無効にするにはどうすればいいですか？

Question

申し訳ありませんがタイトルが私の質問をはっきりと示していない場合。

<div className={"floated left column header-items " + this.props.active}> 
    <Link onClick={this.headerItemClicked.bind(this)} className='home' to="/home" style={comStyles().headerItem}>Home</Link> 
    <Link onClick={this.headerItemClicked.bind(this)} className='setting' to="/setting" style={comStyles().headerItem}>Setting</Link> 
</div> 

いくつかのリンクがあるヘッダーコンポーネントがあります。私が今したいのは、現在のページがホームであるかどうかをチェックすることです。その後、ホームリンクは無効になります。

これを行うには、classnameのパスを確認することをお勧めします。これを達成するためのもっと簡単な方法があれば必要なのでしょうか？次のように

私のソリューションは、次のとおりです。

headerItemClicked(e){ 
     if(e.target.className == this.props.active){ 
      e.preventDefault(); 
     }  
    } 

Answer 1

私はCSSにpointer-event方法のように。 まず、Linkをハードコードしないで、配列を作成してループして、代わりにLinkをレンダリングしてください。

次に、あなたの部品のようなものでなければなりません：

const routes = [ 
 
{ 
 
    name: 'home', 
 
    path: '/home' 
 
}, 
 
{ 
 
    name: 'about', 
 
    path: '/about' 
 
}]; 
 

 
const listOfLink = routes.map((route) => (
 
    <Link to={route.path} disabled={this.props.active === route.name}>{route.name}</Link> 
 
);

して、CSSを追加します。

a[disabled] { pointer-events: none; }