как использовать крючок реакции useState для более чем одного элемента?

#javascript #reactjs #web #react-hooks #use-state

Вопрос:

Я создаю веб-сайт с полным стеком, используя mern (mongo express reactjs и nodejs), впервые используя крючки react. Поэтому у меня есть загрузочные карты с кнопкой сворачивания, чтобы скрыть основной текст карты, но у меня есть 6 карт, и кнопка сворачивания работает с крючком useState, таким образом, что onClick устанавливает свойство expand в значение false и наоборот. Мой вопрос в том, должен ли я использовать 6 крючков useState для 6 карт? или в любом случае, есть какое-то решение. ps. что если один и тот же крючок используется на всех картах, то onClick развернет все карты.

вот мой код одного государства использования и одной карты:

 const [open1, setOpen1] = useState(false);  lt;Button   onClick={() =gt; setOpen1(!open1)}  aria-controls="example-collapse-text"  aria-expanded={open1}  gt;  click  lt;/Buttongt;  lt;Collapse in={open1}gt;  lt;div id="example-collapse-text"gt;  This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.  lt;/divgt;  lt;/Collapsegt;  

Комментарии:

1. Примените свою логику , указав числовое значение для useState, например : const [открыть, setOpen] = useState(1);

2. @Ajith не могли бы вы уточнить подробнее? поскольку логическое значение предназначено для расширенной опоры aria, которая расширяется и сворачивается на true и false

3. Я добавил ответ сейчас, не могли бы вы, пожалуйста, проверить и дать мне знать

4. Я думаю, что более модульным способом решения этой проблемы было бы определение вашей карты как отдельного компонента React. Каждая карта будет иметь свое собственное состояние, и вы можете использовать ее бесконечно. Логика onClick также будет обрабатываться внутри этого компонента.

5. @mkemaltas ну что ж, это хорошее решение, спасибо

Ответ №1:

ну, это было решено путем создания компонента для карты, а затем использования его в качестве элемента jsx.

 export default function DepartmentCard() { const [open, setOpen] = useState(false);  lt;Button onClick={() =gt; setOpen(open)} aria-controls="example-collapse-text" aria-expanded={(open === 1)? true : false}gt; click lt;/Buttongt; lt;Collapse in={open}gt; lt;div id="example-collapse-text"gt; This is a longer card with supporting text below as a natural  lead-in to additional content. This content is a little bit longer. lt;/divgt; lt;/Collapsegt; }  

кстати, это тот же код, но вместо того, чтобы использовать его 6 раз, я сделал как один компонент и использовал тег компонента 6 раз. но разница в том, что теперь каждый компонент имеет свое собственное состояние

Пример:

 ReactDOM.render( lt;divgt; lt;DepartmentCard/gt; lt;DepartmentCard/gt; lt;DepartmentCard/gt; lt;DepartmentCard/gt; lt;DepartmentCard/gt; lt;DepartmentCard/gt; lt;/divgt;  

или вы можете просто использовать функцию map() или цикл для визуализации 6 карт. и вы можете использовать реквизит, чтобы изменить тело каждой карты.

Комментарии:

1. Можете ли вы поделиться кодом также в качестве ответа

2. да да конечно

Ответ №2:

Что вам нужно сделать , так это создать папку с именем компонента (имя не обязательно должно совпадать, но это очень важно). В этой папке сделайте свой карточный компонент таким

 import React, { useState } from "react";  const card = ({ prop1, prop2 }) =gt; {  const [isOpen, setOpen] = useState(false);   const collapseListener = () =gt; {  setOpen((prvState) =gt; !prvState);  };   return (  lt;divgt;  lt;button onClick={collapseListener}gt;{/* button to collapse */}lt;/buttongt;  lt;collable collapse={isOpen}gt;  {/* your collapasble component */}  lt;h1gt;{prop1}lt;/h1gt;  lt;h1gt;{prop2}lt;/h1gt;  lt;/collablegt;  lt;/divgt;  ); };  export default card;   

Затем вы можете импортировать этот компонент карты из любого места и использовать его следующим образом

 lt;Card prop1={'first'} prop2={'second'} /gt;  

Ответ №3:

Можете ли вы попробовать следующую логику ?

 const [open, setOpen] = useState(1); lt;Button onClick={() =gt; setOpen(1)} aria-controls="example-collapse-text" aria-expanded={(open === 1)? true : false}gt; click lt;/Buttongt; lt;Collapse in={(open === 1)? true : false}gt; lt;div id="example-collapse-text"gt; This is a longer card with supporting text below as a natural  lead-in to additional content. This content is a little bit longer. lt;/divgt; lt;/Collapsegt;  lt;Button  onClick={() =gt; setOpen(2)}  aria-controls="example-collapse-text"  aria-expanded={(open === 2)? true : false}gt;  click lt;/Buttongt; lt;Collapse in={(open === 2)? true : false}gt;  lt;div id="example-collapse-text"gt;  This is a longer card with supporting text below as a natural  lead-in to additional content. This content is a little bit longer.  lt;/divgt; lt;/Collapsegt;  

Комментарии:

1. ну, это работает, но это только для расширения; так как, если я хочу свернуть его, я должен развернуть другой, просто чтобы изменить номер в состоянии использования.

2. Вы также можете следовать модульному подходу, чтобы уменьшить повторное кодирование для каждой кнопки и свернуть (это будет рекомендуемый способ).

3. @FirasSCMP, пожалуйста, поддержите, если это вам поможет