看看你的codsandbox，我已經(jīng)通過重構(gòu)解決了
基本上，您想要處理父項中選定的項目，并將選擇的項傳遞給您的子項。當您單擊子項時，您可以使用作為 props 傳遞的 handleSelect 函數(shù)來告訴父項您更改了所選索引。
然后在你的孩子中，你只需傳遞一個 bool 作為 props (isSelected) 測試所選索引是否等于 .map 當前實例中項目的索引
所以只有一個孩子會得到這個布爾值的真值。
然后，在您的 navevent 日期中，您可以重構(gòu)有條件添加所選課程的方式。由于您不想傳遞空類，因此您可以使用此運算符&&?；旧希绻?isSelected 為 true ，它將應(yīng)用所選的類，否則它將不會應(yīng)用任何內(nèi)容。
我刪除了第一個條件，因為我不明白你想要做什么，只留下 isSelected 作為參考。
導航主控
import React, { Component } from "react";
//import "./Main.css";
import NavEventDate from "./NavEventDate.js";
export default class NavMain extends Component {
constructor() {
super();
this.state = {
currentSelectedIndex: null,
date: [
{
day: 0,
month: 0,
year: 0,
dayName: ""
},
{
day: 0,
month: 0,
year: 0,
dayName: ""
},
{
day: 0,
month: 0,
year: 0,
dayName: ""
},
{
day: 0,
month: 0,
year: 0,
dayName: ""
},
{
day: 0,
month: 0,
year: 0,
dayName: ""
}
]
};
this.GetOneDayFormat.bind(this);
this.SetDate.bind(this);
}
componentDidMount() {
let startDate = new Date();
this.SetDate(startDate);
console.log(this.state.date);
}
SetDate(startDate) {
let dates = this.state.date;
for (let i = 0; i < 5; i++) {
let currentDate = new Date();
currentDate.setDate(startDate.getDate() + i);
dates[i].day = String(currentDate.getDate());
dates[i].month = String(currentDate.getMonth() + 1);
dates[i].year = String(currentDate.getFullYear());
dates[i].dayName = String(this.GetOneDayFormat(currentDate));
}
this.setState({
date: dates
});
}
GetOneDayFormat = (today) => {
let dayNumber = today.getDay();
let dayName = "";
switch (dayNumber) {
case 0:
dayName = "Sunday".substring(0, 3);
break;
case 1:
dayName = "Monday".substring(0, 3);
break;
case 2:
dayName = "Tuesday".substring(0, 3);
break;
case 3:
dayName = "Wednesday".substring(0, 3);
break;
case 4:
dayName = "Thursday".substring(0, 3);
break;
case 5:
dayName = "Friday".substring(0, 3);
break;
case 6:
dayName = "Saturday".substring(0, 3);
break;
default:
break;
}
return dayName;
};
handleSelect = (index) => {
this.setState({ currentSelectedIndex: index });
};
render() {
return (
<nav id="sectionNav" class="datepicker event">
<div className="clearfix list-days">
<h1>Events</h1>
<ul className="mobile-off">
{this.state.date.map((data, index) => (
<NavEventDate
dayData={data}
index={index}
isSelected={this.state.currentSelectedIndex === index}
handleSelect={this.handleSelect}
/>
))}
</ul>
</div>
</nav>
);
}
}
導航事件日期
import React, { useState, Component } from "react";
//import "./Main.css";
function NavEventDate({ dayData, handleSelect, index, isSelected }) {
const dayToday = new Date();
return (
<li
onClick={() => handleSelect(index)}
className={isSelected && "selected"}
data-date="20/11/2020"
>
<a href="#">
{dayData.dayName}
<h1>{dayData.day}</h1>
</a>
</li>
);
}
export default NavEventDate;
如您所見，我僅添加了一個 css 屬性來將所選項目項目符號變成黃色，以便您可以看到結(jié)果。
如果您需要進一步解釋，請告訴我。
