Блог

Я создаю веб-сайт с полным стеком, используя 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;  

ну, это было решено путем создания компонента для карты, а затем использования его в качестве элемента 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 карт. и вы можете использовать реквизит, чтобы изменить тело каждой карты.

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

 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;  

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

 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;