ReactJs - компонент условного рендеринга или скрытия - PullRequest
Новая
       8

ReactJs - компонент условного рендеринга или скрытия

0 голосов
/ 22 ноября 2018

Каков де-факто подход к выбору между условным рендерингом или сокрытием компонента с помощью { display: 'none' }?

Ради обсуждения, скажем, у меня есть FilterComponent, который содержит titleфильтр и список FilterItems с name и amount.

Короче говоря, FilterComponent может быть:

Цвет

  • синий (19)
  • желтый (17)
  • оранжевый (3)
  • черный (7)

  • зеленый (10)

    + Show More

При нажатии кнопки Show More будет отображаться больше FilterItem с, то есть

Цвет

  • синий (19)
  • желтый (17)
  • оранжевый (3)
  • черный (7)
  • зеленый (10)
  • Коричневый (17)
  • Розовый (88)
  • Белый (55)
  • Красный (32)

  • Фиолетовый (17)

    - Show Less

Должен ли я скрыть FilterItem с ниже Show More?Или я должен вернуть null для приведенных ниже и отобразить их после обновления состояния с помощью Show More?

Ответы [ 7 ]

0 голосов
/ 22 ноября 2018

Вы можете изменить начальное значение состояния isHidden или что-то в этом роде.При нажатии кнопки значение будет противоположно предыдущей ситуации.И когда вы хотите сделать это, вы должны дать условие;

{ isHidden &&

...
0 голосов
/ 22 ноября 2018

Как правило, между display: none и условным рендерингом нет существенных различий в производительности, поскольку поведение браузера в обоих случаях практически одинаково.Основное отличие состоит в том, что если вы используете display: none, то узел не удаляется из дерева DOM, что заставляет некоторые псевдоселекторы CSS, такие как :last-child, рассматривать скрытый узел как последний-дочерний и так далее.Таким образом, это не связано с производительностью, но в основном связано с CSS.Оба подхода в порядке, я полагаю:)

0 голосов
/ 22 ноября 2018

Я думаю, что есть несколько способов выполнить то, что вам нужно.Тем не менее, это кажется наиболее практичным: 

{myConditionIsTrue && <MyComponent />}

В вашем случае имеет смысл использовать состояние.Я хотел бы иметь пропеллер внутри FilterComponent с именем showFullList

{this.state.showFullList && (
 <React.Fragment>
   <All/><The/><Other/><Components/>
</React.Fragment>)}

Просто будьте утомлены, этот механизм фактически удаляет / добавляет в DOM.

0 голосов
/ 22 ноября 2018

Вы можете использовать библиотеку под названием реагировать, если.Эта библиотека помогает вам отображать или нет на основе какого-либо условия.

Вот пример: 

const Bar = ({ name, age, drinkingAge }) => (
    <div>
        <Header />
        <If condition={ age >= drinkingAge }>
            <Then><span className="ok">Have a beer, {name}!</span></Then>
            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>
        </If>
        <Footer />
    </div> )
0 голосов
/ 22 ноября 2018

Обычно в React лучше не отображать что-либо, чем скрывать.Вот одно связанное обсуждение: https://discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6

0 голосов
/ 22 ноября 2018

Было бы более целесообразно не отображать элементы, которые не должны отображаться, до тех пор, пока не будет нажата кнопка Показать больше и состояние не обновится.Таким образом, вы можете обработать, сколько элементов должно быть показано по умолчанию перед нажатием Show More.Таким образом, вместо применения встроенных стилей или специального класса к определенным элементам, вы можете использовать одну и ту же логику для всех FilterItems, но отображать только X из них.

0 голосов
/ 22 ноября 2018

Я бы пошел за подход "обновление состояния".Таким образом, у вас всегда есть фактические filterItems, которые отображаются в состоянии.Таким образом, состояние ваших компонентов синхронизировано и представляет текущий отображаемый пользовательский интерфейс.

Думаю, в этом вопросе нет правильных или неправильных =)

...