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

Question

我正在尝试使用条件与映射循环渲染反应，但我收到错误。

以下是代码：

＆＃13;

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

没有条件陈述的工作代码：

＆＃13;

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我使用obj.Status作为＆＃34; True＆＃34;或＆＃34;错误＆＃34;指示节点是否必须处于活动状态或不处于活动状态。

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 }/>
    )
})}

使用三元运算符尝试此代码。