В операторе if как определить разницу между JSX.Элементом и обычным объектом?

#reactjs #typescript

Вопрос:

Для получения данных у subMenuData меня есть простой object :

   {
    id: 9,
    name: 'Test1',
    subMenuData: [{ name: 'First Link', children: [{ name: 'SubLink', url: '' }] }],
  },

Но иногда у меня будет объект, у которого будет компонент React

   {
    id: 3,
    name: 'Test2',
    subMenuData: <TestComp />,
  },

Так что в моем типе у меня есть

   subMenuData: JSX.Element | { name: string; children: { name: string; url: string }[] }[]

Таким образом, оба они являются объектом, но есть ли способ определить разницу при выполнении оператора if? В этом конкретном заявлении я хочу Test1 , чтобы оно было отображено, но если я пройду, Test2 то у меня будет другое заявление if для этого.

         {typeof menuData.subMenuData === 'object' amp;amp; (
          <div>
            {menuData.subMenuData.map((item, idx) => {
              return <div key={idx}>{item.name}</div>
            })}
          </div>
        )}

Прямо сейчас меня мучает эта ошибка, и это потому, что я пытаюсь отобразить тест 1, который является простым объектом в качестве Element объекта типа

 Property 'map' does not exist on type 'Element | { name: string; children: { name: string; url: string; }[]; }[]'.
  Property 'map' does not exist on type 'Element'.ts(2339)

Ответ №1:

Вы можете использовать instanceof (или Array.isArray() если вас интересуют только массивы), если у вас есть класс, который может соответствовать этому объекту, или в качестве обходного пути для отсутствующей map функции/атрибута просто проверьте, не является ли это undefined :

 if (menuData.subMenuData.map) {
    // do stuff with map()
}

Пример:

 if (menuData.subMenuData instanceof Array)
if (menuData.subMenuData instanceof YourClass)

         {menuData.subMenuData.map amp;amp; (
          <div>
            {menuData.subMenuData.map((item, idx) => {
              return <div key={idx}>{item.name}</div>
            })}
          </div>
        )}