Question

我试图将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>
    )
   }

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

Answer 1

您可以使用动态的className，希望这项工作

<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的简写形式，即检查this.state.events[0].id是否等于当前event.id是否添加此类，否则添加其他类

Answer 2

尝试一下（使用map中的内置计数器，并询问counter是否为0 ... else ...）：

 <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>

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

2 个答案: