React组件

时间:2018-04-01 15:47:13

标签: reactjs conditional ternary-operator

我试图在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;

1 个答案:

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

将此视为解释:How do I check for null values in JavaScript?