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

Question

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

更具体地说，我试图创建一个开关，将隐藏svg的红线部分通过输入"false"到setter prop中——这样在整个项目中，这可以在需要的地方完成。

我正在使用useState和一种道具系统来尝试实现这一点，但是我在细节上遇到了麻烦-我得到的当前错误是"ReferenceError: setter is not defined"

有更好的方法来实现这一点吗?我该怎么做才能让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，还有一些其他的方法，但是请告诉我。