Javascript 当用户单击ReactJS中的链接时，如何在return语句之外声明变量并切换变量？

我对ReactJS比较陌生，我正试图为我的学校俱乐部制定一个时间表

我想做的是，单击日程表日历上的其他任何一天，就可以更改日程表。因此，如果我单击“星期六”，它将处于“活动”状态，因此它将变为蓝色，然后显示当天的事件。星期天也一样。我不知道如何实现这一点。我基本上需要在return语句之外声明一个变量，并在用户单击链接时切换变量

const schedule = () => {
    return (
        <React.Fragment>
            <div className='schedule-page'>
                <Navbar />
                <MobileNavBar />
                <div className='schedule-map'>
                    <div className='sche-side'>
                        <div className='timer'>
                            <div className='timer-header'>
                                <h1>Timer</h1>
                            </div>
                            <div className='timer-second-row'>
                                <div className='next-event'>
                                    <h2>New Event</h2>  
                                </div>
                                <div className='start-time'>
                                    <h2>Start Time</h2>
                                </div>
                                <div className='countdown'>
                                    <h2>Countdown</h2>
                                </div>
                            </div>
                        </div>
                        <h1>Schedule</h1>
                        <div className='sche-date'>
                            <div className='fri-day'>
                                <div className='day active'>Fri. Feb, 21</div>
                            </div>
                            <div className='first-day'>
                                <div className='day'>Sat. Feb, 22</div>
                            </div>
                            <div className='second-day'>
                                <div className='day'>Sun. Feb, 23</div>
                            </div>
                        </div>
                        <div className='events'>
                            <ul className='event-ul'>
                                <li className='event event-active'>
                                    <span className='time'>4:00PM</span>
                                    <span className='todo'>Check-In</span>
                                    <span className='detail'>Be sure to check your email and fill out the hacker check-in form, then hop onto our Hopin and Discord!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>6:00PM</span>
                                    <span className='todo'>Opening Ceremony</span>
                                    <span className='detail'>Come join the opening ceremony for SacHacks 2021 to hear from our amazing sponsors and learn more about our hackathon!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>6:15PM</span>
                                    <span className='todo'>IBM Keynote Workshop</span>
                                    <span className='detail'>Come learn more about IBM Z</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>7:00PM</span>
                                    <span className='todo'>Hacking Starts + Team Mixer</span>
                                    <span className='detail'>Don’t have a team? No worries! Meet and team up with other hackers to launch your ideas at SacHacks 2021!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>7:30PM</span>
                                    <span className='todo'>Datathon for Social Good: ML on Z</span>
                                    <span className='detail'>Learn about machine learning on Z from IBM engineers and last year’s IBM Z winners!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>9:10PM</span>
                                    <span className='todo'>Intro to UI/UX</span>
                                    <span className='detail'>Want to make your project stand out? Learn more about UI/UX Design in this interactive workshop hosted by Grace from Design Buddies!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>10:10PM</span>
                                    <span className='todo'>Exploding Designer's Block</span>
                                    <span className='detail'>Come learn more about game design in our Exploding Designer’s Block workshop, hosted by Dan, Lead Designer at EA!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>11:30PM</span>
                                    <span className='todo'>Intro to Web Dev HTML/CSS</span>
                                    <span className='detail'>No experience with Web Development? Come build a website with HTML and CSS!</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <Copyright />
        </React.Fragment>
    );
};

export default schedule;

const schedule=（）=>{
返回(
计时器
新事件
开始时间
倒计时
日程
2月21日，星期五
2月22日星期六
二月二十三日星期日


下午四点
登记入住
请务必检查您的电子邮件并填写黑客登记表，然后跳上我们的Hopin and Discord！


下午六点
开幕式
欢迎参加SacHacks 2021的开幕式，听取我们令人惊叹的赞助商的意见，并进一步了解我们的hackathon！


下午6:15
IBM主题研讨会
来了解更多关于IBMz的信息


下午7:00
黑客开始+团队混音器
没有团队？不用担心！与其他黑客会面并合作，在SacHacks 2021发布您的想法！


下午7:30
社会福利数据链：Z上的ML
从IBM工程师和去年的IBM Z获奖者那里了解关于在Z上进行机器学习的信息！


晚上9:10
用户界面/用户体验简介
想让你的项目脱颖而出吗？在这个由Grace从Design Buddies主持的互动研讨会上，了解更多关于UI/UX设计的信息！


晚上10:10
引爆设计师积木
来我们的爆炸式设计师积木研讨会了解更多关于游戏设计的信息，由EA的首席设计师Dan主持！


晚上11:30
Web开发HTML/CSS简介
没有网页开发经验？来用HTML和CSS建立一个网站吧！


);
};
导出默认时间表；

这是我当前网站的代码。如果你愿意，我也可以显示CSS文件。如果有人能帮我，我将不胜感激

使用useState钩子

const schedule = () => {
const [active,setActive]=useState("");
.....
}

u可以通过以下方式更改“活动”的值：

setActive("Saturday")

这会导致组件重新加载。

---

状态是react中最基本、最常用的概念，因此我建议您熟悉它。

这是一个非常基本的问题。您应该熟悉

useState

hook。概述如何执行此操作：将每天标记提取到专用组件中，然后将当前活动的一天保持在react状态，并根据当前状态值决定渲染哪个组件。将处理程序添加到选项卡，以便在有人单击时切换状态。这是一个基本问题，我可以在这里看到您尚未完成任何reactJS课程，您需要学习一些课程。这非常重要，并学习如何使用react-hooksOkay，所以我确实使用了

useState

hook，但无论何时调用它，我都会得到

第22:33行：react-hook“useState”在函数“schedule”中调用，该函数既不是React函数组件，也不是自定义React钩子函数React hooks/rules of hooks

因此我这样做了，并得到了一个错误，即第22:33行：React钩子“useState”在函数“schedule”中调用“它既不是反应函数组件，也不是自定义反应钩子函数反应钩子/钩子规则