时间戳

首页 > 解决方案 > 反应函数 displayBanner = () => {

reactjs - 反应函数 displayBanner = () => {

问题描述

我目前正在开发一个项目，并尝试通过更改 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' 横幅 else 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.

任何人都可以协助解释我所缺少的吗？

标签： reactjs

解决方案

逻辑应该是styleprop的一部分：

<HeaderWrapper style={{ visibility: props.isBannerVisible ? 'hidden' : 'none' }}>

如果你仍然想要一个函数，你应该返回一个对象而不是一个字符串，所以它会匹配style道具：

function hideBanner(isBannerVisible) {
  return { visiblity: isBannerVisible ? "hidden" : "none" };
}

<HeaderWrapper style={{ ...hideBanner(props.isBannerVisible) }} />;

推荐阅读