时间戳

首页 > 解决方案 > 在反应组件/随机数中使用useState随机更改两个div的状态

javascript - 在反应组件/随机数中使用useState随机更改两个div的状态

问题描述

我在组件的同一位置有两个带有广告的 div。他们都有一个名为 decesionmaker1 和 decesionmaker2 的道具。

<div className="billboard">
    <Adinjection
        adtype="billboard"
        configobject={Siteconfig.userfinder.billboard}
        decisionmaker2={true}
    />
</div>

<div className="bigbillboard">
    <Adinjection
        adtype="bigbillboard"
        configobject={Siteconfig.userfinder.bigbillboard}
        decisionmaker1={true}
    />
</div>

两个道具都是真实的（decesionmaker2={true}）。我把这个道具交给了“控制组件”。然后我有以下 useState

const [ showbillboard, setshowbillboard ] = useState(false);

有了这个 useState 和一个我存储在变量中的随机数

const thesecrandom = Math.floor(Math.random() * 10 + 1);

我试图根据随机数的值在其中一个 div 上随机设置状态以随机显示它们：useeffect 看起来：

useEffect(() => {
    console.log("thesecrandom", thesecrandom);
    if (thesecrandom > 5) {
        if (decisionmaker1) {
            setshowbillboard(true);
            setAdSpotvisible(true);
        } else if (thesecrandom < 5) {
            if (decisionmaker2) {
                setshowbillboard(true);
                setAdSpotvisible(true);
            } else {
                setshowbillboard(true);
            }
        }
    } else {
        setshowbillboard(true);
    }

    if (scrollactiv) {
        window.onscroll = () => {
            //setOffset(window.pageYOffset)
            if (window.pageYOffset > 1200) {
                setAdSpotvisible(true);
                setshowbecause(true);
            } else {
                setAdSpotvisible(true);
                setshowbecause(false);
            }
        };
    } else {
        setshowbecause(true);
    }
}, []);

return 语句看起来：

return (
    <div>
        {visible && showbecause && showbillboard ? (
            <div style={divstyleBlock}>
                <iframe
                    id={configobject.id}
                    name={configobject.name}
                    src={currentAd.src}
                    frameBorder="no"
                    scrolling="no"
                    width={configobject.width}
                    height={configobject.height}
                    allow="autoplay"
                    ref={(el) => (myRef.current = el)}
                    onLoad={(onload) => {
                        // console.log("the frame is loaded ");
                        setAdSpotvisible(true);
                    }}
                    onError={(onerror) => {
                        // console.log("my fram is not  loaded ");
                        setAdSpotvisible(false);
                        head1a.appendChild(Pixelscript);
                    }}
                />
            </div>
        ) : (
            <div style={divStyleNone} ref={(el) => (mySecREf.current = el)} />
        )}

        <Adblockerdetection />
    </div>
);

使用此代码，组件上所有其他广告的显示状态也随机显示。在决策者 1+决策者 2 上尝试了许多其他 if 语句组合，但我找不到解决方案。谁能帮我这个？

标签： javascriptreactjs

解决方案

我想显示其中之一。

那么你不应该在组件本身内部管理它。尤其是当你只需要在那个地方

const bigbillboard = React.useMemo(() => Math.random() < 0.5, []);

{ bigbillboard ? (
    <div className="bigbillboard">
        <Adinjection 
            adtype="bigbillboard" 
            configobject={Siteconfig.userfinder.bigbillboard} 
        />
    </div>
) : (
    <div className="billboard">
        <Adinjection 
            adtype="billboard" 
            configobject={Siteconfig.userfinder.billboard} 
        />
    </div>
) }

以及关于window.onscroll

窗户。onscroll 工作正常，没有什么可以定制的。

标记的下一个实例可能会覆盖您的滚动处理程序。或者您在另一个（完全不相关的）组件中以相同的方式实现另一个滚动处理程序，它会覆盖这个，现在继续调试它。最好这样写：

useEffect(() => {
    if (!scrollactiv) {
        setshowbecause(true);
        return;
    }

    const handler = () => {
        //setOffset(window.pageYOffset)
        if (window.pageYOffset > 1200) {
            setAdSpotvisible(true);
            setshowbecause(true);
        } else {
            setAdSpotvisible(true);
            setshowbecause(false);
        }
    };

    addEventListener("scroll", handler);

    // And remove your event-listener when they are no longer needed;
    // or the component unmounts.
    // That's something you didn't do either.
    return () => {
        removeEventListener("scroll", handler);
    };
}, [scrollactiv]);

推荐阅读