我正在嘗試創建一種方法來打開和關閉在整個設計中使用的 svg 的某些元素，因此它可以在整個網站上重復使用。
更具體地說，我正在嘗試創建一個切換，通過在 setter 屬性中輸入“false”來隱藏 svg 的紅線部分 - 所以在整個專案中，這可以在需要的地方完成。
我正在使用 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;
索引.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;
uj5u.com熱心網友回復：
我會做一些事情，比如添加一個看起來像這樣的道具..
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，還有其他一些方法可以做到這一點，但請告訴我。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/460383.html
標籤：javascript 反应 if 语句 使用状态