Блог

Я создаю FAQ, у меня есть массив с вопросами и ответами, мне удалось отобразить этот массив на своей странице, но я хочу отредактировать разные стили для вопросов и ответов, как я могу это сделать? вот мой код:

Мой список часто задаваемых вопросов:

 const FAQ = ({ props }) =gt; {   const history = useHistory();  const classes = useStyles();  const dispatch = useDispatch();  const { user, userlist, isLoading } = useSelector((state) =gt; state.Authentication);   const [expanded, setExpanded] = React.useState(false);   const handleChange = (panel) =gt; (event, isExpanded) =gt; {  setExpanded(isExpanded ? panel : false);  };   const WellbeingData = [  {  index: 1,   question: "Lorem ipsum dolor sit amet?",  answer:  "Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium. Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium.Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium.",  },  {  index: 2,   question: "Dignissimos sequi architecto?",  answer:  "Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque. Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque.",  },  {  index: 3,   question: "Voluptas praesentium facere?",  answer:  "Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.",  },  ];  

и вот моя последняя неудачная попытка сделать это правильно

 const questionList = WellbeingData.map((data) =gt; lt;div style={{fontSize: 18, fontWeight: 'bold'}}gt;lt;li key={data.index}gt;{data.question}lt;/ligt;lt;/divgt;)  const answerList = WellbeingData.map((data) =gt; lt;div style={{fontSize: 16}}gt;lt;li key={data.index}gt;{data.answer}lt;/ligt;lt;/divgt;)  {questionList} lt;br/gt; {answerList}  

Что я мог сделать, чтобы решить эту проблему…

Если стили ограничены, скажем "Answered" , "New" , "Deleted" , вы можете иметь один класс css для каждого стиля (например .deletedAnswer .deletedQuestion ) и добавить новый элемент в свой объект , например type: something , а затем динамически выбирать класс на основе значения типа. самый простой способ-задать значение имени класса:

 {  index: 3,   question: "Voluptas praesentium facere?",  answer:  "Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.",  class: "deletedAnswer" }  

А затем просто добавьте значение array[index].class в класс вашего элемента.