javascript - 条件渲染在 React 映射循环中不起作用

Question

我正在尝试在 react 中使用带映射循环渲染的条件，但我收到错误。

代码如下:

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}];
function NavbarActive(props) {
	return  (
		<li className="active"><a href="">{props.Category}</a></li>
	);
};
function NavbarNotActive(props) { 
	return (
		<li><a href="">{props.Category}</a></li>
	);
};
	
function NavbarList(props)	{
	return (
			 <div className="navbar-wrapper">
	<div className="container">
	<nav className="navbar navbar-fixed-static-top navbar-inverse">
	<div className="container">
	<div className="navbar-header">
	<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>
		<span className="icon-bar"></span>
		<span className="icon-bar"></span>
		<span className="icon-bar"></span>
	</button>
	<a className="navbar-brand" href="#">Brand</a>
	</div>
	  <div id="navbar" className="collapse navbar-collapse">
	  <ul className="nav navbar-nav">
	  {navbarValue.map((obj, index) =>
	    if (obj.Status) {
	    <NavbarActive  key={index} Category ={obj.Category }/>
	    }
	  <NavbarNotActive  key={index} Category ={obj.Category }/>
	)}
	</ul>
	</div>
	</div>
	</nav>
	</div>
	</div>
	);
};

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>

没有条件语句的工作代码:

const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}];
function NavbarActive(props) {
	return  (
		<li className="active"><a href="">{props.Category}</a></li>
	);
};
function NavbarNotActive(props) { 
	return (
		<li><a href="">{props.Category}</a></li>
	);
};
	
function NavbarList(props)	{
	return (
			 <div className="navbar-wrapper">
	<div className="container">
	<nav className="navbar navbar-fixed-static-top navbar-inverse">
	<div className="container">
	<div className="navbar-header">
	<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>
		<span className="icon-bar"></span>
		<span className="icon-bar"></span>
		<span className="icon-bar"></span>
	</button>
	<a className="navbar-brand" href="#">Brand</a>
	</div>
	<div id="navbar" className="collapse navbar-collapse">
		<ul className="nav navbar-nav">
			{navbarValue.map((obj, index) =>
				<NavbarNotActive  key={index} Category ={obj.Category }/>
			)}
			</ul>
			</div>
	</div>
	</nav>
	</div>
	</div>
	);
};

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

首先需要使用{}，然后在map body中放入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 }/>}
)}