首页 文章

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

提问于
浏览 次
0

我正在尝试将一个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 回答

  • 0

    你可以使用动态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 添加这个类别添加另一个类

    回复于

相关问题