有條件的渲染不能在React映射循環中工作

Question

我想在映射循環渲染中使用條件反應，但我收到錯誤。

下面是代碼：

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; 
 
function NavbarActive(props) { 
 
\t return (
 
\t \t <li className="active"><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
function NavbarNotActive(props) { 
 
\t return (
 
\t \t <li><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
\t 
 
function NavbarList(props) \t { 
 
\t return (
 
\t \t \t <div className="navbar-wrapper"> 
 
\t <div className="container"> 
 
\t <nav className="navbar navbar-fixed-static-top navbar-inverse"> 
 
\t <div className="container"> 
 
\t <div className="navbar-header"> 
 
\t <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
    <span className="sr-only">Toggle navigation</span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t </button> 
 
\t <a className="navbar-brand" href="#">Brand</a> 
 
\t </div> 
 
\t <div id="navbar" className="collapse navbar-collapse"> 
 
\t <ul className="nav navbar-nav"> 
 
\t {navbarValue.map((obj, index) => 
 
\t  if (obj.Status) { 
 
\t  <NavbarActive key={index} Category ={obj.Category }/> 
 
\t  } 
 
\t <NavbarNotActive key={index} Category ={obj.Category }/> 
 
\t)} 
 
\t </ul> 
 
\t </div> 
 
\t </div> 
 
\t </nav> 
 
\t </div> 
 
\t </div> 
 
\t); 
 
}; 
 

 
ReactDOM.render(
 
    <NavbarList />, 
 
    document.getElementById('root') 
 
);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<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> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="root"></div>

工作的代碼，而條件statment：

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; 
 
function NavbarActive(props) { 
 
\t return (
 
\t \t <li className="active"><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
function NavbarNotActive(props) { 
 
\t return (
 
\t \t <li><a href="">{props.Category}</a></li> 
 
\t); 
 
}; 
 
\t 
 
function NavbarList(props) \t { 
 
\t return (
 
\t \t \t <div className="navbar-wrapper"> 
 
\t <div className="container"> 
 
\t <nav className="navbar navbar-fixed-static-top navbar-inverse"> 
 
\t <div className="container"> 
 
\t <div className="navbar-header"> 
 
\t <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
    <span className="sr-only">Toggle navigation</span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t \t <span className="icon-bar"></span> 
 
\t </button> 
 
\t <a className="navbar-brand" href="#">Brand</a> 
 
\t </div> 
 
\t <div id="navbar" className="collapse navbar-collapse"> 
 
\t \t <ul className="nav navbar-nav"> 
 
\t \t \t {navbarValue.map((obj, index) => 
 
\t \t \t \t <NavbarNotActive key={index} Category ={obj.Category }/> 
 
\t \t \t)} 
 
\t \t \t </ul> 
 
\t \t \t </div> 
 
\t </div> 
 
\t </nav> 
 
\t </div> 
 
\t </div> 
 
\t); 
 
}; 
 

 
ReactDOM.render(
 
    <NavbarList />, 
 
    document.getElementById('root') 
 
);

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
<div id="root"></div>

我正在使用obj.Status作爲「True」或「False」來指示節點是否必須呈現活動狀態或不活動狀態。

Answer 1

首先你需要使用{}然後把if-else語句放在地圖體內，並返回結果。

寫這樣的：

{navbarValue.map((obj, index) => { 
    if (obj.Status) 
     return <NavbarActive key={index} Category ={obj.Category }/> 
    return <NavbarNotActive key={index} Category ={obj.Category }/> 
})} 

或者使用ternary operator：

{navbarValue.map((obj, index) => obj.Status ? 
     <NavbarActive key={index} Category ={obj.Category }/> 
    : 
     <NavbarNotActive key={index} Category ={obj.Category }/>} 
)} 

Answer 2

{navbarValue.map((obj, index) => { 
    return (
     (obj.Status) ? 
      <NavbarActive key={index} Category ={obj.Category }/> : 
      <NavbarNotActive key={index} Category ={obj.Category }/> 
    ) 
})} 

試試這個代碼與三元的運營商。