Визуализация компонента React в зависимости от его типа - PullRequest
Новая
       10

Визуализация компонента React в зависимости от его типа

2 голосов
/ 26 сентября 2019

Мне было интересно, есть ли способ в React условно визуализировать компоненты на основе их типа.Согласно документации, вы можете определить типы реквизитов компонента следующим образом: 

MyComponent.propTypes = {
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
};

Есть ли способ, использующий каркас для проверки типа и визуализации компонента по-разному в зависимости от того, был ли полученПропорциональные данные: string или array?

Я знаю, что могу использовать необработанный JS для определения этого, используя type of или проверяя свойства массива в данных. 

if (typeof description === "string") { /* render string component */ }
else { /* render array component */ }

Мне было интересно, есть ли у React встроенный, более надежный способ сделать это.

1 Ответ

0 голосов
/ 26 сентября 2019

Мне было интересно, есть ли у React встроенный, более надежный способ сделать это.

description - это тип объединительной опоры.

Таким образомнеобходимо иметь логику рендеринга, используя рендер реквизит . 

const StringDescription = (props) => {...}
const ArrayDescription = (props) => {...}

function renderDescription(description) { // rendering logic / strategy
  switch(typeof description) {
    case 'string':
      return <StringDescription />;
    default:
      return <ArrayDescription />;
  }
}

<Description
  description={description}
  render={renderDescription} // render prop
/>
...