时间戳

首页 > 解决方案 > 连接函数名称reactjs

javascript - 连接函数名称reactjs

问题描述

我在 React/Next 中有一个独特的情况。本质上，我在 React 中迭代以创建 div。迭代功能运行良好。我现在正在尝试为每个创建的 div 创建隐藏/显示部分，并且我想使用锚标记来允许隐藏和显示隐藏的 div。我关注了隐藏元素的 [this][1] 线程和连接函数名称的 [this][2] 链接。但是，我认为第二个链接不适用于 React 中的连接函数名称，因为它说 showDogFunctions 不是一个显然不是一个好的错误的函数。任何人都可以帮忙吗？此外，如果有人有更简洁的方法来实现我的功能，那也将不胜感激。


**Error**
Variable Names are a bit dif but you can easily associate.

[![Error][3]][3]


  [1]: https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react
  [2]: https://stackoverflow.com/questions/23263601/concatenation-function-name-in-js
  [3]: https://i.stack.imgur.com/zUoxr.png

标签： javascriptreactjsfunction

解决方案

如果每个组件都有一个状态，那么状态实际上应该在该组件中。由于<div>s 没有状态，因此您需要围绕它们的功能组件：

 function SingleDog({ counter }) {
    const [show, setShow] = useState(false);

    return (
       <div key={counter} className="user-box">
         <span className="expand-more">
            <a onClick={() => setShow(it => !it)} >Toggle</a>
            {show && <div>Hi there</div>}
          </span>
        </div>
    );
 }

 function DogList() {
    const [dogCount, setDogCount] = useState(0);
   
   const dogs = [];

   for(let count = 0; count < dogCount; count++) {
      dogs.push( <SingleDog counter={counter} /> );
   }

   return <>
     {dogs}
     {/* ... more content here */}
   </>;
 }

如果您需要从父级影响所有组件的状态，例如关闭所有扩展，那么您需要再次提升状态。但是，不要使用 n 个状态，而是将一个状态与数组或对象一起使用，例如：

  const [show, setShow] = useState({ });

     //...
     <SingleDog
      counter={counter}
      show={show[counter]}
      setShow={() => setShow(prev => ({ ...prev, [counter]: !prev[counter] }))}
     />

推荐阅读