首页 文章

React组件中的条件呈现

提问于
浏览 次
-1

我正在尝试在React组件中实现条件渲染 . 如果获取的数据中的特定值不为null，则应呈现内容 . 否则，预定义的文本将出现在 <p> 元素中 .

请注意，已获取数据的图像属性正确显示 . 所以数据正在被提取 . data.subscriptions_url 为null（我可以在我的JSON api中看到），但是，三元运算符会停止，就好像条件为true而不是显示我的预定义文本 .

有帮助吗？

这是我的代码：

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;
reactjs conditional ternary-operator

1 回答

  • 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?

    回复于

相关问题