如何使用React中的相应按钮更改文章的状态

Question

我正在构建我的第一个React演示。我想学习如何编写一个函数和/或useEffect，它将根据点击的按钮显示文章。我有4个按钮始终可见，我希望有1篇文章可见，这取决于选择了哪一个。提前感谢您的帮助！

这是我到目前为止的设置：

import React from 'react'
import './main.css'
import mainData from './mainData'
import Button from './menuButtons'
import Article from './contentCard'
function Main() {
const [menuProps] = React.useState(mainData.menu)
const [buttons, setButtonActive] = React.useState(mainData.buttons)
const [articles, setArticle] = React.useState(mainData.articles[0])
function setActive(key) {
setButtonActive(prevActive => {
return prevActive.map((button) => {
return button.key === key ? {...button, active: true} : {...button, active: false}
})
})
}
const buttonElements = buttons.map((buttonProps) => (
<Button 
key={buttonProps.key}
label={buttonProps.label}
active={buttonProps.active}
setactive={() => setActive(buttonProps.key)}
/>
))

return (
<main className='content-container flex'>
<section className='menu flex'>
<img src={menuProps.img} alt='Travelogue splash images'/>
<h1>{menuProps.title}</h1>
<p>{menuProps.description}</p>

<div className='menu-buttons flex'>
{buttonElements}
</div>
</section>
<Article
key={articles.key}
style={{backgroundImage: `url(${articles.img})`}}
title={articles.title}
description={articles.description}
/>
</main>
)
}
export default Main

Answer 1

我想分享在这个场景中为我工作的函数结构。。。

[为了进一步澄清，我使用了一个单独的数据JS文件，其中包含内容mainData，如上所示，它被映射到按钮和文章的main.JS文件中。按钮键在数据文件中设置，其值与索引相同]

function setButtonActive(key) {
setActive(prevActive => {
return prevActive.map((button, index) => {
if (key === index) {
setArticle(mainData.articles[index])
}
return button.key === key ? 
{...button, active: true} : {...button, active: false}
})
})
}

该网站现已上线，因此每个人都可以看到我目标的最终结果：https://willfranck.github.io/react-demo-travel-site/

谢谢！

Answer 2

根据您的状态，如何确定哪个按钮处于活动状态？

const [buttons, setButtonActive] = React.useState(mainData.buttons)  
const [articles, setArticle] = React.useState(mainData.articles[0])

在这里，看起来您混合了两个概念——将元素设置为按钮和将按钮设置为活动。我不确定您的mainData.buttons是什么，但除非您计划根据用户操作更改按钮，否则不需要将它们设置为状态。你已经导入了它们，你可以使用它们。

您应该使用useState来将按钮设置为活动按钮——如何决定最终由您决定。文章也是如此。按钮和文章是如何关联的？从那里，你可以决定如何构建你的状态。