Условный рендеринг компонентов с одинаковыми реквизитами в ReactJS

У меня есть простой условный тест, который я запускаю, чтобы увидеть, какой компонент отображать. Если условие истинно, я визуализирую один компонент, ложно другой компонент. Прямо сейчас мой код выглядит примерно так:

    {isPresent && (
        <FirstComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}
    {!isPresent && (
        <SecondComponent
          propOne="value one"
          propTwo="value two"
          {...props}
        />
    )}

Я хочу знать, могу ли я сделать этот код немного СУХИМ. Что-то вроде этого:

{isPresent && (
    <FirstComponent
        {propList}
    />
)}
{!isPresent && (
    <SecondComponent
        {propList}
    />
)}

Где propList представляет все реквизиты, которые я хочу включить в каждый из этих компонентов.

Это возможно? Если да, то как?

Спасибо.


reactjs javascript react-props react-component
person Moshe    schedule 15.09.2019    source источник
comment
как вы решаете значение пролиста? уже обработано или вам нужно обрабатывать на основе isPresent ?   -  person Code Maniac    schedule 15.09.2019
comment
Значения реквизита не имеют ничего общего с isPresent.   -  person Moshe    schedule 15.09.2019

Ответы (2)


arrow_upward
2
arrow_downward

Если оба элемента имеют одинаковые свойства, вы можете сохранить эти свойства в константу и передать ее целевому компоненту.

function YourComponent(props) {
  const commonProps = {
      propOne: "value one",
      propTwo: "value two",
      ...props
   };

   const Component = isPresent ? FirstComponent : SecondComponent;
   return <Component {...commonProps}/>;
}
person Olivier Boissé    schedule 15.09.2019
comment
Спасибо - получилось. - person Moshe; 15.09.2019

arrow_upward
2
arrow_downward

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

 let Comp = isPresent ? FirstComponent : SecondComponent
 let propList = {
    propOne :"value one",
    propTwo : "value two",
    ...props
 }

Затем в своем возвращении вы можете использовать

 <Comp
   { propList }
 />

Примечание.  Всегда называйте переменную первой заглавной буквой, если вы назначаете ей компонент, потому что In JSX, lower-case tag names are considered to be HTML tags

person Code Maniac    schedule 15.09.2019
comment
Спасибо - очень признателен. - person Moshe; 15.09.2019