如何在React中通过对应按钮切换文章的显示状态？

你的代码已经完成了按钮激活状态的切换，但还缺少点击按钮时更新对应文章的逻辑。下面提供两种实现方式，分别直接在点击函数中处理，以及使用useEffect监听状态变化来实现：

方案一：点击函数中直接更新文章 #

这种方式逻辑直观，在切换按钮激活状态的同时，直接找到对应key的文章并更新展示：

修改你的setActive函数：

function setActive(key) {
    // 更新按钮激活状态
    setButtonActive(prevActive => {
        return prevActive.map((button) => {
            return button.key === key ? {...button, active: true} : {...button, active: false}
        })
    })
    // 根据key匹配对应文章并更新
    const targetArticle = mainData.articles.find(article => article.key === key)
    if (targetArticle) {
        setArticle(targetArticle)
    }
}

方案二：使用useEffect监听激活状态（更简洁的状态管理） #

我们可以优化状态管理，不再维护整个按钮数组的active属性，而是单独维护一个activeKey状态，然后通过useEffect监听这个key的变化来自动更新文章：

重构后的完整代码：

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 = mainData.buttons
    // 维护当前激活的按钮key，初始值设为第一个按钮的key
    const [activeKey, setActiveKey] = React.useState(mainData.buttons[0].key)
    const [currentArticle, setCurrentArticle] = React.useState(mainData.articles[0])

    // 当activeKey变化时，自动匹配并更新文章
    React.useEffect(() => {
        const targetArticle = mainData.articles.find(article => article.key === activeKey)
        if (targetArticle) {
            setCurrentArticle(targetArticle)
        }
    }, [activeKey]) // 依赖项为activeKey，仅当它变化时执行

    const buttonElements = buttons.map((buttonProps) => (
        <Button 
            key={buttonProps.key}
            label={buttonProps.label}
            // 直接通过key比较判断是否激活，无需维护按钮数组的active属性
            active={buttonProps.key === activeKey}
            setactive={() => setActiveKey(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={currentArticle.key}
                style={{backgroundImage: `url(${currentArticle.img})`}}
                title={currentArticle.title}
                description={currentArticle.description}
            />
       </main>
    )
}

export default Main

关键注意点 #

• 确保mainData中按钮的key和文章的key是一一对应的，这样find方法才能正确匹配到对应文章。
• 方案二更符合React的状态驱动思想，减少不必要的状态维护，代码更简洁高效。

内容的提问来源于stack exchange，提问作者WilliamF