连接函数名称reactjs答案

【问题标题】：concatenating function names reactjs连接函数名称reactjs
【发布时间】：2021-04-17 21:54:08
【问题描述】：

我在 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

【问题讨论】：

更常用的方法是让狗 div 成为他们自己的组件，然后包含与该项目相关的显示、切换等。
代码工作正常，您只需添加大于 0 的初始 dogCounter 状态，如 3 以匹配您的地图查找。请参阅运行codesandbox。
你能复制粘贴错误吗？您描述的错误不应该发生在这段代码中。
@christian 有点想像，大概有一个增加dogCounter的按钮，而对于dogCounter > 3这个就失败了……

标签： javascript reactjs function

【解决方案1】：

如果您对每个组件都有一个状态，那么该状态实际上应该在那个组件中。由于<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] }))}
     />

【讨论】：