Question

我想知道什么是检查是否有可用数据以及输入值是否为空的最佳实践。

我应该使用：

Yes ? DO THIS : DO THAT or YES && do this

我正在开发一个组件，并且看起来两者都可以工作，但是我想知道什么是最好的方法以及正确的方法。

我的代码还可以吗？

代码：

import React from 'react';

const Fragrance = (props) => {
    const { FragranceArray } = props;
    return (
        <div className="row">
        {
        FragranceArray.map((fragrance, index) => {
            const { Name, Image, Category, Description } = fragrance;
            const url = 'http://localhost:1337';

            return (
                <article key={index} className="col-sm-6 col-xs-12">
                    { Image &&
                        <picture>
                            <img className="fragrance__image" src={url + Image.url} alt={Name} />
                        </picture>
                    }

                    {
                    Name && Category &&
                    <header>
                        {Name ? <h2 className="fragrance__title">{Name}</h2> : ''}
                        {Category ? <span className="fragrance__category">{Category}</span> : ''}
                    </header>
                    }

                    { Description &&
                    <main>
                        <p className="fragrance__description">{Description}</p>
                    </main> }

                </article>
                )
            })
        }
        </div>

    )
}

export default Fragrance;

Answer 1

是的，您可以使用三元条件吗？ “ yes”：如果不是，则为您的速记的“ no”。您的代码看起来不错，您可以从下面的代码段中删除条件Name && Category，因为您已经在做Name ? html : ''和Category ? html : ''！

{
    <header>
       {Name ? <h2 className="fragrance__title">{Name}</h2> : ''}
       {Category ? <span className="fragrance__category">{Category}</span> : ''}
     </header>
}

您的代码看起来很棒！继续编码！

最佳实践速记如果/否则在React？

1 个答案: