Question

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

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

React组件

1 个答案: