反应：当 link 未激活时显示 1st child/hide 2nd child，当 link 激活时隐藏 1st child/show 2nd child？

Question

我有 2 个 link，每个有 2 个 children，当 parent link不活跃，然后在parentlink活跃时隐藏第1个child/show和第2个child。我如何在 React 中完成此操作？

<Link activeClassName="active" className="sidebar-link" to="/tech/link1">
    <span className="collapsed">
        Title
    </span>
    <div className="expanded">
        Content
    </div>
</Link>

<Link activeClassName="active" className="sidebar-link" to="/tech/link2">
    <span className="collapsed">
        Title
    </span>
    <div className="expanded">
        Content
    </div>
</Link>

Answer 1

简单的方法是根据状态呈现 link 内容。

在渲染中只渲染 if like:

  {/* only rendered if activeMenuId === 2 */}
   {
     activeMenuId === 2 &&
     <span className="collapsed">
       Title
     </span>
   } 
   {/* only rendered if activeMenuId === 1 */}
   {
     activeMenuId === 1 &&
     <div className="expanded">
       Content
     </div>
   }

更多代码来说明我的意思：

import React, { Component } from 'react';
import { Link } from 'react-router';

class demo extends Component {
 constructor(props) {
   super(props);
   this.state = {
     activeMenuId: 1 // assuming at least 1 menu active
   };
 }
  
 render() {
  const { activeMenuId } = this.state; // destructuring helps for readability see below
   
  return (
    <div>
      {/* first menu */}
      <Link 
        activeClassName={activeMenuId === 1 ? 'active' : ''}
        className="sidebar-link" 
        to="/tech/link1">
    
        {/* only visible if menuId = 1 is active */}
        {
          activeMenuId === 1 &&
          <span className="collapsed">
            Title
          </span>    
        }
    
        {/* only visible if menuId= 2 is active */}
        {
          activeMenuId === 2 &&
          <div className="expanded">
            Content
          </div>
        }    
      </Link>

     {/* second menu */}
     <Link 
       activeClassName={activeMenuId === 2 ? 'active' : ''}   
       className="sidebar-link" 
       to="/tech/link2">
       {/* only visible if menuId = 1 is active */}
       {
         activeMenuId === 2 &&
         <span className="collapsed">
           Title
         </span>
       } 
       {/* only visible if menuId= 1 is active */}
       {
         activeMenuId === 1 &&
         <div className="expanded">
           Content
         </div>
       }        
      </Link>
    </div>
  )
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

反应：当 link 未激活时显示 1st child/hide 2nd child，当 link 激活时隐藏 1st child/show 2nd child？

React: Show 1st child/hide 2nd child when link is not active, hide 1st child/show 2nd child when link is active?

reactjs

react-router

react-redux

简单的方法是根据状态呈现 link 内容。