javascript - 如果 json 文件中有内容，有条件地 react 显示链接？

Question

四处寻找，却一无所获。这在 jQuery 和 Rails 上很简单，但不确定在 React 中是否有正确的方法。我有一个从 JSON 文件中获取数据的组件，如果 JSON 有内容，我只想显示某个链接，否则我想隐藏它。到目前为止，我尝试过这种方式但没有成功:

	renderList(projectLinks){
		//let self = this;
		return projectLinks.map(function(link) {
			var showDemo = "";
			if(link.urlDemo === ""){
				console.log("i'm empty");
				showDemo = "displayNone";
			}
			return <Panel header={link.title} eventKey={link.eventKey} key={link.title}>
							<p>{link.description}</p>
	      			<img src={link.image} className="img-thumbnail" alt="project thumbnail"/><br />
							  <a href={link.urlDemo} className={showDemo}>Demo </a>
	      			<a href={link.urlCode}>Code </a>
	    			</Panel>
		});
	}

所以，如果 json 链接是空的，像这样:“urlDemo”:“”，我希望链接被隐藏。

感谢您的帮助。

Answer 1

在渲染内部，使用条件运算符。这是一个例子

render(){
   return (
      <div>
          {this.state.check ? <div>Show this if check is true</div> :
              <div>Show this if check is false</div>}
      <div>
   )
}

编辑:一个更具体的例子

render(){
   return(
      <div>
         {link.urlDemo ? <a href={link.urlDemo}>Demo </a> : null}
      </div>
   )
} 

另一种方法:

render(){
   return(
      <div>
         {link.urlDemo && <a href={link.urlDemo}>Demo </a>}
      </div>
   )
}