在 React 中将 className 添加到数组的第一个 div答案

【问题标题】：Add className to first div of an array in React在 React 中将 className 添加到数组的第一个 div
【发布时间】：2020-11-03 02:51:30
【问题描述】：

我正在尝试将 className 添加到我在 React 中映射的数组的第一个 div。我是新手，所以语法难倒我。

这是我的初始状态：

export default class EventList extends Component {


  state = {
    users: [],
    events: [],
    shownForm: null,
    hideNewForm: true,
    hideEditForm: true,
    currentUserId: this.props.getCurrentUser(),
    editTitle: "",
    editDate: "",
    editSynopsis: "",
    editLocation: "",
    editId: ""
  }

这是一个不起作用的函数，但我正在考虑如何为数组使用条件语句：

addFirstClass =() => {
    if(this.state.events === this.state.events[0]){
    className = "card-body details"
    }else{
    className = "card-body details coral"
    }
  }

这里是我将 div 渲染到 DOM 的地方：

render() {
return(   
<section className="events">
   {this.state.events.map(event => (
      <div key={event.id} className="card">
        <div className={this.addFirstClass()}>
          <p className="card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
       </div>
</section>
    )
   }

我已经搜索了其他线程，但我似乎无法弄清楚如何进行这项工作。任何帮助表示赞赏！

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以使用动态类名，我希望这个工作

<section className="events">
   {this.state.events.map(event => (
      <div key={event.id} className={this.state.events[0].id === event.id ? 'card-body details' : 'card-body details coral'}>
        <div className={this.addFirstClass()}>
          <p className="card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
       </div>
</section>

<div key={event.id} className={this.state.events[0].id === event.id ? 'card-body details' : 'card-body details coral'}>

这里我使用 JavaScript 速记 if，检查 this.state.events[0].id 是否等于当前 event.id 添加这个类，否则添加另一个类

【讨论】：

太棒了！这对我帮助很大！我希望有一天能更好地思考语法。非常感谢！

【解决方案2】：

试试这个（使用地图内置的计数器并询问计数器是否为0 ...否则...）：

 <section className="events">
   {this.state.events.map((event, i) => (
      <div key={event.id} className={i===0 ? 'card-body details' : 'card-body details coral'}>
        <div className={this.addFirstClass()}>
          <p className="card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
   </div>
</section>

或者是一种相反的，更平滑一点的：

 <section className="events">
   {this.state.events.map((event, i) => (
      <div key={event.id} className={'card-body details' + (i !== 0 ? ' coral' : '')}>
        <div className={this.addFirstClass()}>
          <p className="card-details">
           Synopsis:{event.synopsis}</p> 
        </div>
   </div>
</section>

【讨论】：