Question

Reactjs新手。帮我定义data.map classname。比如classname =“plan- {plan.flag}”（表示为class =“plan-red”）。如何在双引号中包含数据值？

import React, { Component } from 'react';
import { Grid,Row,Col} from 'react-bootstrap';

var data = [{"aufr1":5,"dltp3":"Exclusive","cobr3":4,"lidp4":100,"stpd9":"[null]","plnm2":"plan","mpsadvid":5498,"qnty0":2350000,"lnnm3":"PR","prob5":100,"RNum":0,"llst1":"Approved","flag":"red"}];

export default class Report extends Component {

  render() {
    return (  
        <Grid id="report">           
          {
            data.map(function(plan,i){
              return (
               <div className="data-wrapper plan-"+{plan.flag}  key={i}>
                  <div className="row-wrapper plan-header">
                      <Row className="show-grid ">
                          <Col sm={3} md={3} className="plan-name">
                            <h6>Plan</h6>
                            <span>{plan.plnm2}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Id</h6>
                            <span>{plan.plid7}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Opp</h6>
                            <span>{plan.adas4}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Mps Id</h6>
                            <span>{plan.llst1}</span>
                          </Col>
                      </Row>
                  </div>
              </div>
              );
            })
          }
        </Grid>
    );
  }
}

Answer 1

当您设置类名时请记住，+中的concat是通过javascript完成的。

所以换一下整个className来构建字符串：

<div className={"data-wrapper plan-" + plan.flag}  key={i}>

你应该好好去。

Answer 2

Template Strings将是最佳解决方案。

<div className={`data-wrapper plan-${plan.flag}`}  key={i}>

Answer 3

除了Brad的回答之外：React的JSX就像一个模板语言，这意味着你在return语句中写的那些<div></div>将逐字地添加到html页面。然后，当您需要动态部分时，可以使用{}包含一些js表达式，其输出将插入到JSX中的html标记中。所以布拉德的解决方案顺便找到了你。

另外，

map符合ES5标准：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
通常，map为您提供了一种简单而富有表现力的语法，可以将数组更改为您想要的元素，例如： var ids = users.map((user)=>{return user.id;});。因此，如果你不期望一个新的数组，只是对每个元素做一些事情，使用for（i ...）循环（对于ES5）和对于（...）循环（对于ES6）感觉对我来说更好的做法。但肯定这只是风格/品味的问题：）

动态类名，数据映射为ES6

3 个答案: