我试图在React组件中实现条件渲染。如果获取的数据中的特定值不为null,则应呈现内容。否则,预定义的文本将出现在<p>
元素中。
请注意,已获取数据的图像属性正确显示。所以数据正在被提取。 data.subscriptions_url
为空(我可以在我的JSON api中看到),但是,三元运算符会停止,就好像条件为真而不是显示我的预定义文本。
任何帮助?
这是我的代码:
import React, { Component } from 'react';
class Card extends Component {
constructor(props) {
super(props);
}
render() {
let data = this.props.data;
const userBio = data.subscriptions_url !== null ? (
<div className="user-info--bio">
<i className="" />
<p>{data.subscriptions_url}</p>
</div>
) : (
<div className="user-info--bio">
<i className="" />
<p>This user prefers not to share their subscriptions.</p>
</div>
);
return (
<main className="main-card">
<div className="main-card--header-bg"></div>
<div className="main-card--user-info">
<div className="main-card--img-container">
<img src={data.avatar} />
</div>
<div className="user-info--name">
<i className="" />
<p>{data.name}</p>
</div>
{userBio}
</div>
</main>
);
}
}
export default Card;
答案 0 :(得分:1)
尝试检查null:
const userBio = data.subscriptions_url ? (
<div className="user-info--bio">
<i className="" />
<p>{data.subscriptions_url}</p>
</div>
) : (
<div className="user-info--bio">
<i className="" />
<p>This user prefers not to share their subscriptions.</p>
</div>
);