如何使用 useState 和 classList 操作隐藏元素 - React

Question

我正在尝试创建一种方法来打开和关闭在整个设计中使用的 svg 的某些元素，因此它可以在整个网站上重复使用。

更具体地说，我正在尝试创建一个切换开关，通过在 setter 道具中输入“false”来隐藏 svg 的红线部分 - 因此在整个项目中，这可以在需要的地方完成.

我正在使用 useState 和一种道具系统来尝试实现这一点，但是我在具体细节方面遇到了麻烦 - 我得到的当前错误是“ReferenceError：setter 未定义”。

有没有更好的方法来实现这个？我将采取什么方式来定义 setter 并且我当前的方法可行？

代码如下：

const LineSvg = ({setter, toggle}) => {


    return(
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.6 830" xmlSpace="preserve" className="capsules capsules-image-bottom-right position-absolute">
            <path id="red-line" toggle={toggle} setter={setter}  className="capsule-a capsule-foreground fill-red track-on-scroll" d="M10.4,257.6A10.39,10.39,0,0,1,20.8,268V584.4a10.4,10.4,0,0,1-20.8,0V267.9A10.37,10.37,0,0,1,10.4,257.6Z" />
            <g className="track-on-scroll">
                <path id="green-line"   d="M49.2,394.7a10.39,10.39,0,0,1,10.4,10.4v84.4a10.4,10.4,0,0,1-20.8,0V405.1A10.33,10.33,0,0,1,49.2,394.7Z" className="capsule-b fill-green" />
                <path id="blue-line"    d="M49.2,354.6A10.39,10.39,0,0,1,59.6,365v4.9a10.4,10.4,0,1,1-20.8,0v-5A10.31,10.31,0,0,1,49.2,354.6Z" className="capsule-c fill-blue" />
                <path id="grey-line"    d="M49.2,235.2a10.39,10.39,0,0,1,10.4,10.4V330a10.4,10.4,0,0,1-20.8,0V245.6a10.33,10.33,0,0,1,10.4-10.4Z" className="capsule-d fill-grey-light" />
            </g>
        </svg>
    )
}

export default LineSvg;

index.jsx


const HomePage = () => {

    const [redToggle, setRedToggle] = useState(true);

    if(setter == "false"){
        setRedToggle(false)
    } else if(setter == "true"){
        setRedToggle(true)
    }

    const onToggle = () => {
        const redLine = document.getElementById("red-line");

        if(redToggle === false){
            redLine.classList.add("capsule-hide")
        } else if(redToggle === true){
            redLine.classList.remove("capsule-hide")
        }
    }

    

    return(
        
        <Layout>
            <Hero  
                text={
                    <h1>If your software goals aren't ambitous, don't bother scrolling.</h1>
                }
                image={
                    //If nothing is to go in here empty "" needed to prevent error
                    ""
                }
            />

           
            <section className="dark-grey-section py-10">
                <Container>
                    <Row>
                        <Col sm={12} md={6}>
                            <div className="text-column">
                                <h5>What we do</h5>
                                <h4><strong>Thrive in the era of software advantage</strong></h4>
                                <p>Today’s users aren’t easily impressed.</p>
                                <p>And what it does take to impress them can be insanely difficult to build.</p>
                                <p>Insanely difficult happens to be our speciality.</p>
                                <p>Lineate helps businesses craft the software that fits their ambitious needs—quickly, reliably and future-proofed. </p>
                                <a className="btn" href="#">Learn more about our ethos</a>
                            </div>
                        </Col>
                        <Col sm={12} md={6}>
                            <div className="position-relative">
                                <CapsuleSvg image="images/2-young-men-looking-at-a-desktop-computer-in-an-office.jpg" setter="false" toggle={onToggle}/>
                                <LineSvg/>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </section>

        </Layout>
        
    )
}

export default HomePage;

Answer 1

我会做一些事情，比如添加一个看起来像这样的道具..

您的 LineSvg 稍作改动

const LineSvg = ({redLineActive}) => {


    return(
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.6 830" xmlSpace="preserve" className="capsules capsules-image-bottom-right position-absolute">
    {redLineActive ?
            <path id="red-line" className="capsule-a capsule-foreground fill-red track-on-scroll" d="M10.4,257.6A10.39,10.39,0,0,1,20.8,268V584.4a10.4,10.4,0,0,1-20.8,0V267.9A10.37,10.37,0,0,1,10.4,257.6Z" /> 
    : null }
            <g className="track-on-scroll">
                <path id="green-line"   d="M49.2,394.7a10.39,10.39,0,0,1,10.4,10.4v84.4a10.4,10.4,0,0,1-20.8,0V405.1A10.33,10.33,0,0,1,49.2,394.7Z" className="capsule-b fill-green" />
                <path id="blue-line"    d="M49.2,354.6A10.39,10.39,0,0,1,59.6,365v4.9a10.4,10.4,0,1,1-20.8,0v-5A10.31,10.31,0,0,1,49.2,354.6Z" className="capsule-c fill-blue" />
                <path id="grey-line"    d="M49.2,235.2a10.39,10.39,0,0,1,10.4,10.4V330a10.4,10.4,0,0,1-20.8,0V245.6a10.33,10.33,0,0,1,10.4-10.4Z" className="capsule-d fill-grey-light" />
            </g>
        </svg>
    )
}

export default LineSvg;

然后在你的索引中你可以做这样的事情。我不确定你打算如何切换它，所以请根据你打算如何切换它进行调整。

...
const [redToggle, setRedToggle] = useState(true);
...
return (
...
<LineSvg redLineActive={redToggle}/>
<button onClick={() => setRedToggle(!redToggle}>Toggle</button>
...

如果您想要多个红线 svg，还有一些其他方法可以做到这一点，但请告诉我。

如何使用 useState 和 classList 操作隐藏元素 - React

How to hide an element using useState and classList manipulation - React

javascript

if-statement

reactjs

use-state