Как условно отобразить компонент из свойства константы в React?

#javascript #reactjs #react-redux

Вопрос:

Я хотел бы условно отобразить компонент на основе свойства заголовка моей константы. В основном, если заголовок Woffy —gt; Render Component1, это мой код:

 import React from 'react'; import Component1 from '../Collection/Component1'; import Component2 from '../Collection/Component2';  const pets = [  {  header: 'Woffy',  image: '/img/dog.png'  },  {  header: 'kitty',  image: '/img/cat.png'  },  class demo class extends React.Component{ render(){ return( lt;divgt; {header === "Woofy" amp;amp; lt;Component1 /gt;} {header === "kitty" amp;amp; lt;Component2 /gt;} lt;/divgt; ) } }

1. С каким элементом индекса массива вы хотите сравнить заголовок ?

2. Ну, у меня есть раскрывающийся компонент react lt;Выпадающий список/gt; из пользовательского интерфейса Fluent, я хочу отобразить компонент, основанный на выборе раскрывающегося списка, который я хочу указать в свойстве заголовка. возможно ли это ? Это мой выпадающий список lt;Выпадающие элементы={домашние животные} заполнитель=»Мир зоопарка» /gt;

3. Да, вы можете добиться этого, см. Мой обновленный ответ.

Ответ №1:

Ну, у меня есть раскрывающийся компонент react lt;Dropdown/gt; из пользовательского интерфейса Fluent, я хочу отобразить компонент, основанный на выборе раскрывающегося списка, который я хочу указать в свойстве заголовка. возможно ли это ? Это мой выпадающий список lt;Dropdown items={pets} placeholder="Zoo world" /gt;

Вы можете использовать переменную, в которой вы находитесь в value состоянии выпадающего списка, а затем сравнить переменную для визуализации компонента.

 import React from "react"; import { Dropdown } from "@fluentui/react-northstar"; const pets = [  {  key: "1",  header: "Woffy",  image: "/img/dog.png"  },  {  key: "2",  header: "kitty",  image: "/img/cat.png"  }  ];  const DropdownExample = () =gt; {  const [dropdownValue, setDropdownValue] = React.useState("3");  console.log(dropdownValue);  return (  lt;Dropdown  items={pets}  value={dropdownValue}  onChange={(_, data) =gt; setDropdownValue(data.value.header)}  /gt;  ); };

Теперь сравните эту dropdownValue переменную с компонентом рендеринга.

 lt;divgt; {dropdownValue === "Woofy" amp;amp; lt;Component1 /gt;} {dropdownValue === "kitty" amp;amp; lt;Component2 /gt;} lt;/divgt;

1. Это решает вопрос, я просто добавил раскрывающийся пример экспорта по умолчанию; чтобы экспортировать свой компонент на страницу рендеринга. С вашей помощью я узнал, что компоненты классов в React не поддерживают хуки, но я могу смешивать компоненты классов и функций 🙂 Ты потрясающая

Ответ №2:

Вы можете проверить header значение с помощью Array.map метода, а затем вернуть желаемый результат.

 lt;divgt;  {pets.map((e) =gt; {  if (e.header === "Woffy") {  return lt;Component1 /gt;;  } else if (e.header === "kitty") {  return lt;Component2 /gt;;  } else {  return null;  }  })} lt;/divgt;;