如何切换超过 1 个列表元素的 className？

Question

我有一个名为 NavMain.js 的父组件和一个名为 NavEventDate.js 的子组件。我使用 props 将一些数据从父组件传递到子组件。当渲染子组件时，我只希望第一个<li>元素具有className="selected"，然后通过单击其他<li>元素，我只希望单击的元素具有className="selected"，其他<li>元素具有className=""。（关闭）

这张图片解释了它现在是如何工作的

所以如果我单击元素，除非我单击两次，否则<li>所有元素都会保留。className="selected"

这是我的代码沙箱：https://codesandbox.io/s/romantic-heisenberg-pg9x6 ?file=/NavMain.js

父组件的逻辑并不重要，问题出在子组件中。我包含了所有逻辑，以便更好地理解我如何传递道具。

Answer 1

看看你的codsandbox，我已经通过重构解决了基本上，您想要处理父项中选定的项目，并将选择的项传递给您的子项。当您单击子项时，您可以使用作为 props 传递的 handleSelect 函数来告诉父项您更改了所选索引。然后在你的孩子中，你只需传递一个 bool 作为 props (isSelected) 测试所选索引是否等于 .map 当前实例中项目的索引所以只有一个孩子会得到这个布尔值的真值。然后，在您的 navevent 日期中，您可以重构有条件添加所选课程的方式。由于您不想传递空类，因此您可以使用此运算符&&。基本上，如果 isSelected 为 true ，它将应用所选的类，否则它将不会应用任何内容。我删除了第一个条件，因为我不明白你想要做什么，只留下 isSelected 作为参考。导航主控import React, { Component } from "react";//import "./Main.css";import NavEventDate from "./NavEventDate.js";export default class NavMain extends Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; currentSelectedIndex: null,&nbsp; &nbsp; &nbsp; date: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayName: ""&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayName: ""&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayName: ""&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayName: ""&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayName: ""&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; };&nbsp; &nbsp; this.GetOneDayFormat.bind(this);&nbsp; &nbsp; this.SetDate.bind(this);&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; let startDate = new Date();&nbsp; &nbsp; this.SetDate(startDate);&nbsp; &nbsp; console.log(this.state.date);&nbsp; }&nbsp; SetDate(startDate) {&nbsp; &nbsp; let dates = this.state.date;&nbsp; &nbsp; for (let i = 0; i < 5; i++) {&nbsp; &nbsp; &nbsp; let currentDate = new Date();&nbsp; &nbsp; &nbsp; currentDate.setDate(startDate.getDate() + i);&nbsp; &nbsp; &nbsp; dates[i].day = String(currentDate.getDate());&nbsp; &nbsp; &nbsp; dates[i].month = String(currentDate.getMonth() + 1);&nbsp; &nbsp; &nbsp; dates[i].year = String(currentDate.getFullYear());&nbsp; &nbsp; &nbsp; dates[i].dayName = String(this.GetOneDayFormat(currentDate));&nbsp; &nbsp; }&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; date: dates&nbsp; &nbsp; });&nbsp; }&nbsp; GetOneDayFormat = (today) => {&nbsp; &nbsp; let dayNumber = today.getDay();&nbsp; &nbsp; let dayName = "";&nbsp; &nbsp; switch (dayNumber) {&nbsp; &nbsp; &nbsp; case 0:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Sunday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 1:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Monday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 2:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Tuesday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 3:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Wednesday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 4:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Thursday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 5:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Friday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 6:&nbsp; &nbsp; &nbsp; &nbsp; dayName = "Saturday".substring(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; return dayName;&nbsp; };&nbsp; handleSelect = (index) => {&nbsp; &nbsp; this.setState({ currentSelectedIndex: index });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <nav id="sectionNav" class="datepicker event">&nbsp; &nbsp; &nbsp; &nbsp; <div className="clearfix list-days">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Events</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul className="mobile-off">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.date.map((data, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <NavEventDate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dayData={data}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isSelected={this.state.currentSelectedIndex === index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleSelect={this.handleSelect}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; );&nbsp; }}导航事件日期import React, { useState, Component } from "react";//import "./Main.css";function NavEventDate({ dayData, handleSelect, index, isSelected }) {&nbsp; const dayToday = new Date();&nbsp; return (&nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; onClick={() => handleSelect(index)}&nbsp; &nbsp; &nbsp; className={isSelected && "selected"}&nbsp; &nbsp; &nbsp; data-date="20/11/2020"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; {dayData.dayName}&nbsp; &nbsp; &nbsp; &nbsp; <h1>{dayData.day}</h1>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </li>&nbsp; );}export default NavEventDate;如您所见，我仅添加了一个 css 属性来将所选项目项目符号变成黄色，以便您可以看到结果。如果您需要进一步解释，请告诉我。