Лучшая практика коротких рук, если / еще в React?

Question

Хотелось бы узнать, как лучше проверять, если есть доступные данные и не является ли введенное значение пустым.

Должен ли я использовать:

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

IЯ работаю над компонентом, и кажется, что оба работают, но я хотел бы знать, что лучше сделать здесь и как правильно.

И мой код в порядке?

код:

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

Да, вы можете использовать троичное условие?«да»: «нет» для вашей краткости, если еще.Ваш код выглядит хорошо, вы можете удалить условие Name && Category из приведенного ниже фрагмента, поскольку вы уже выполняете Name ? html : '' и Category ? html : ''!

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

Ваш код выглядит великолепно!Продолжайте кодировать!