React 组件中的条件渲染

Question

我正在尝试在 React 组件中实现条件渲染。如果获取的数据中的特定值不为空，则应呈现内容。否则，预定义文本将出现在 <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;

Answer 1

试试这个检查是否为空：

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

解释如下：How do I check for null values in JavaScript?

React 组件中的条件渲染

Conditional rendering in React component

reactjs

conditional

ternary-operator