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

debugcn 发表于 Dev

莱斯利·博伊德

我正在尝试将 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>
    )
   }

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

穆门·索里曼

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

<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添加这个类，否则添加另一个类

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。