Reactjs React函数显示横幅编译问题

我目前正在处理一个项目，试图通过更改

className

的状态来隐藏横幅，如下所示：

<div className={visbilityBanner}>

 <button
    type="button"
    className="btn btn-secondary btn-sm"
    size="small"
    style={hideButtonsStyle}
    onClick={(e) => displayBanner(e)}
    >
       Hide Banner
    </button>

我的思路是解决方案需要一个名为

displayBanner

的函数。在下面的代码中，我检查

！bannerHdr&！bannerMsg

（如果没有文本，变量

未定义

），则更改

className='hide'

，否则更改为

className='show'

const displayBanner = () => {
    const [visbilityBanner, setVisbilityBanner] = useState('show');

    if (!bannerHdr && !bannerMsg) {                  
      setVisbilityBanner('hide');      
        console.log(visbilityBanner);     
        return visbilityBanner;
    } 
    setVisbilityBanner('show');     
      console.log(visbilityBanner);
      return visbilityBanner;
    };

但是，我得到一个编译错误：

未能编译

Failed to compile
./src/components/Banners.js
  Line 220:  React Hook "useState" is called in function "displayBanner" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  Line 249:  'visbilityBanner' is not defined                                                                                                         no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

---

有人能帮我解释一下我遗漏了什么吗？

您需要在

函数之外的组件顶层使用
React Hooks
，或者如果阻止
，请将代码更改为此，这样您就可以开始了：

const [visbilityBanner, setVisbilityBanner] = useState("show");

const displayBanner = () => {
  if (!bannerHdr && !bannerMsg) {
    setVisbilityBanner("hide");
    console.log(visbilityBanner);
    return visbilityBanner;
  }
  setVisbilityBanner("show");
  console.log(visbilityBanner);
  return visbilityBanner;
};

它给出错误的原因是因为
displayBanner
是一个函数而不是一个组件。React组件总是返回jsx。该函数仅返回
show
或
hide
字符串。在这种情况下，它只是一个helper函数，不能使用
useState
hook

给出了错误的答案，这里有一个不同的实现：

 const App = () => {
   const [isVisible, setIsVisible] = useState(true);
   
   return (
      <div>
        <button onClick={() => setIsVisible(false)}>Click to hide</button>

        {isVisible && <Banner />}

      </div>
    )
} 

const-App=（）=>{
const[isVisible，setIsVisible]=useState（true）；
返回(
setIsVisible（false）}>单击以隐藏
{isVisible&&}
)
} 
你能给出一个完整的最小可复制的示例吗：不要共享代码片段。请阅读有关自定义挂钩的内容，你不能像错误中所述，将挂钩作为挂钩规则的一部分来编写函数（不是自定义挂钩）。Dennis在我将常量声明移到它工作的arrow函数之外后，立即执行-const[VisibilityBanner，SetVisibilityBanner]=useState（'show'）；我有点困惑，因为我参加了一个关于Udemy的很棒的课程，它显示了他们在函数内部声明了这些，并且没有编译问题。我不是说这是对的还是错的，但它现在起作用了。我会发回Udemy的回复，我在课程的问答板上也有同样的问题。Dennis我也被提供给了g在不超过公司政策的情况下提供尽可能多的代码。我对这些代码片段表示歉意。我不想公开被归类为内部的内容。