useState()用于条件样式

Question

我对一个项目的反应和工作是新的，想知道如何有条件地改变单个页脚组件的主题。附件是我试图渲染的两个主题。以下是我目前拥有的代码:(https://i.stack.imgur.com/Jhe8O.png) (https://i.stack.imgur.com/ioHli.png)'

function Footer({ themeSecondary }) {
return (
<React.Fragment>
<footer
className="footer"
style={
themeSecondary
? { backgroundColor: '#D5966C' }
: { backgroundColor: '#151515' }
}
>
<img
src={
themeSecondary ? 'assets/logo-dark.svg' : 'assets/logo-light.svg'
}
alt="Modern Art Gallery"
className="footer__logo"
/>
<p
className="footer__desc"
style={themeSecondary ? { color: '#151515' } : { color: '#FFF' }}
>
The Modern Art Gallery is free to all visitors and open seven days a
week from 8am to 9pm. Find us at 99 King Street, Newport, USA.
</p>
<ul
className="footer__media-container"
style={themeSecondary ? { filter: 'invert(1)' } : {}}
>
<li className="footer__media-icon">
<a href="https://www.facebook.com" target="_blank" rel="noreferrer">
<img src="/assets/icon-facebook.svg" alt="facebook" />
</a>
</li>
<li className="footer__media-icon">
<a
href="https://www.instagram.com"
target="_blank"
rel="noreferrer"
>
<img src="/assets/icon-instagram.svg" alt="instagram" />
</a>
</li>
<li className="footer__media-icon">
<a href="https://www.twitter.com" target="_blank" rel="noreferrer">
<img src="/assets/icon-twitter.svg" alt="twitter" />
</a>
</li>
</ul>
</footer>
</React.Fragment>
)
}

function Home() {
const [themeSecondary, setThemeSecondary] = useState(null)
useEffect(() => {
setThemeSecondary(false)
console.log(themeSecondary)
}, [themeSecondary])
return (
<div>
<header className="hero">
<div className="hero__img"></div>
<h1 className="hero__title">
Modern <br /> Art Gallery
</h1>
<p className="hero__desc">
The arts in the collection of the Modern Art Gallery all started from
a spark of inspiration. Will these pieces inspire you? Visit us and
find out.
</p>
<button className="hero__cta">Our Location</button>
</header>
<main className="main">
<article className="main__container-grid1">
<img
src="/assets/mobile/image-grid-1.jpg"
alt="art-gallery"
className="main__img-grid1 img"
/>
<h2 className="main__title-grid1">Your day at the Gallery</h2>
<p className="main__desc-grid1">
Wander through our distinct collections and find new insights about
our artists. Dive into the details of their creative process.
</p>
</article>
<section className="main__container-grid2">
<img
src="/assets/mobile/image-grid-2.jpg"
alt="art gallery with bench for viewing"
className="main__img-grid2 img"
/>
<img
src="/assets/mobile/image-grid-3.jpg"
alt="vistors browsing art collections"
className="main__img-grid3 img"
/>
<article className="main__content-wrapper">
<h2 className="main__title-grid2">Come & be inspired</h2>
<p className="main__desc-grid2">
We’re excited to welcome you to our gallery and see how our
collections influence you.
</p>
</article>
</section>
</main>
<Footer theme={themeSecondary} />
</div>
)
}

function Location() {
const [themeSecondary, setThemeSecondary] = useState(true)
useEffect(() => {
setThemeSecondary(true)
console.log(themeSecondary)
}, [themeSecondary])
return (
<div className="location">
<Footer theme={themeSecondary} />
</div>
)
}
export default Location

就像我说的，我是非常新的反应，我有更新内联样式的问题。我认为这与调用栈和所有事情发生的顺序有关，但我不确定。谢谢:)

Answer 1

我想我知道你做错了什么。当把themessecondary作为props传递给Footer组件时，你给它的名字是theme而不是themessecondary。看下面:

function Home() {
...
<Footer theme={themeSecondary} />
}

然后在Footer组件中，将props解构为themessecondary。所以你可以这样修复你的错误:

function Footer({ theme }) {
...
}

之后，你需要将Footer组件中的themessecondary更改为theme。