四处寻找,却一无所获。这在 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”:“”,我希望链接被隐藏。
感谢您的帮助。
最佳答案
在渲染内部,使用条件运算符。这是一个例子
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>
)
}
关于javascript - 如果 json 文件中有内容,有条件地 react 显示链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48056608/