如何在ReactJS中单独切换/显示内容

huangapple
go评论96阅读模式
英文:

How to toggle/display content individually in ReactJS

问题

我的问题是如何在单击时单独切换/显示"一些文本"内容？我可以为每个div使用不同的函数和状态，它可以工作，但我知道这不是正确的方法。你能帮助我吗？谢谢

这是我的代码：

  1. function App() {
  2.   const [loaded, setLoaded] = useState(true);
  3.   const [show, setShow] = useState(false);
  5.   const handleShow = () => {
  6.     setShow(!show);
  7.   };
  9.   return (
  10.     <div className={styles.App}>
  11.       {loaded && (
  12.         <div className={styles.cards_container}>
  13.           <div className={styles.card_container} onClick={handleShow}>
  14.             <h3>Title</h3>
  15.             {show && (
  16.               <div>
  17.                 <p>一些文本</p>
  18.               </div>
  19.             )}
  20.           </div>
  21.           <div className={styles.card_container} onClick={handleShow}>
  22.             <h3>Title</h3>
  23.             {show && (
  24.               <div>
  25.                 <p>一些文本</p>
  26.               </div>
  27.             )}
  28.           </div>
  29.           <div className={styles.card_container} onClick={handleShow}>
  30.             <h3>Title</h3>
  31.             {show && (
  32.               <div>
  33.                 <p>一些文本</p>
  34.               </div>
  35.             )}
  36.           </div>
  37.         </div>
  38.       )}
  39.     </div>
  40.   );
  41. }

希望这有帮助。

英文:

my question is how can I toggle/display the "Some text" content on onClick individually?.
I can use different function and state for every div an it is working but I know this is not the correct way to do it .
Can you help me with this guys? Thanks

This is my code

  1. function App() {
  2. const [loaded, setLoaded] = useState(true);
  3. const [show, setShow] = useState(false);
  4. const handleShow = () =&gt; {
  5. setShow(!show);
  6. };
  7. return (
  8. &lt;div className={styles.App}&gt;
  9. {loaded &amp;&amp; (
  10. &lt;div className={styles.cards_container}&gt;
  11. &lt;div className={styles.card_container} onClick={handleShow}&gt;
  12. &lt;h3&gt;Title&lt;/h3&gt;
  13. {show &amp;&amp; (
  14. &lt;div&gt;
  15. &lt;p&gt;Some text&lt;/p&gt;
  16. &lt;/div&gt;
  17. )}
  18. &lt;/div&gt;
  19. &lt;div className={styles.card_container} onClick={handleShow}&gt;
  20. &lt;h3&gt;Title&lt;/h3&gt;
  21. {show &amp;&amp; (
  22. &lt;div&gt;
  23. &lt;p&gt;Some text&lt;/p&gt;
  24. &lt;/div&gt;
  25. )}
  26. &lt;/div&gt;
  27. &lt;div className={styles.card_container} onClick={handleShow}&gt;
  28. &lt;h3&gt;Title&lt;/h3&gt;
  29. {show &amp;&amp; (
  30. &lt;div&gt;
  31. &lt;p&gt;Some text&lt;/p&gt;
  32. &lt;/div&gt;
  33. )}
  34. &lt;/div&gt;
  35. &lt;/div&gt;
  36. )}
  37. &lt;/div&gt;
  38. );
  39. }

答案1

得分: 0

你可以为你的卡片创建一个自定义组件来处理每个卡片的状态：

  1. function Card() {
  2.     const [show, setShow] = useState(false);
  4.     const handleShow = () => {
  5.         setShow((state) => !state);
  6.     };
  8.     return (
  9.         <div className={styles.card_container} onClick={handleShow}>
  10.             <h3>Title</h3>
  12.             {show && (
  13.                 <div>
  14.                     <p>Some text</p>
  15.                 </div>
  16.             )}
  17.         </div>
  18.     );
  19. }

然后在你的应用中使用它：

  1. function App() {
  2.     const [loaded, setLoaded] = useState(true);
  4.     return (
  5.         <div className={styles.App}>
  6.             {loaded && (
  7.                 <div className={styles.cards_container}>
  8.                     <Card />
  9.                     <Card />
  10.                     <Card />
  11.                 </div>
  12.             )}
  13.         </div>
  14.     );
  15. }
英文:

You could create a custom component for your card that handles the state for each card:

  1. function Card() {
  2. const [show, setShow] = useState(false);
  3. const handleShow = () =&gt; {
  4. setShow(state =&gt; !state);
  5. };
  6. return &lt;div className={styles.card_container} onClick={handleShow}&gt;
  7. &lt;h3&gt;Title&lt;/h3&gt;
  8. {show &amp;&amp; (
  9. &lt;div&gt;
  10. &lt;p&gt;Some text&lt;/p&gt;
  11. &lt;/div&gt;
  12. )}
  13. &lt;/div&gt;
  14. }

And use it in your app:

  1. function App() {
  2. const [loaded, setLoaded] = useState(true);
  3. return (
  4. &lt;div className={styles.App}&gt;
  5. {loaded &amp;&amp; (
  6. &lt;div className={styles.cards_container}&gt;
  7. &lt;Card /&gt;
  8. &lt;Card /&gt;
  9. &lt;Card /&gt;
  10. &lt;/div&gt;
  11. )}
  12. &lt;/div&gt;
  13. );
  14. }

huangapple
  • 本文由 发表于 2023年6月2日 01:09:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76384218.html
  • display
  • html
  • jsx
  • reactjs
  • toggle
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定