Javascript 数据映射为ES6的动态类名

对Reactjs来说是新的。帮助我定义data.map类名。类似于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>
    );
  }
}

import React，{Component}来自'React'；
从'react bootstrap'导入{Grid，Row，Col}；
var数据=[{“aufr1”：5，“dltp3”：“独占”，“cobr3”：4，“lidp4”：100，“stpd9”：“[null]”，“plnm2”：“计划”，“mpsadvid”：5498，“qnty0”：2350000，“lnnm3”：“PR”，“prob5”：100，“RNum”：0，“llst1”：“批准”，“标志”：“红色”}；
导出默认类报表扩展组件{
render（）{
报税表（
{
数据图（功能图（一）{
返回(
计划
{plan.plnm2}
身份证件
{plan.plid7}
目镜肺体积描记图
{plan.adas4}
Mps Id
{plan.llst1}
);
})
}
);
}
}

设置类名时，请记住，

+

中的concat是由javascript完成的

因此，请包装整个类名以生成字符串：

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

你应该准备好出发。

将是最好的解决方案

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

除了Brad的答案之外，React的JSX就像一种模板语言，这意味着你在return语句中写的那些
将被直接添加到html页面。然后，当您希望在其中包含动态部分时，可以使用
{}
来包含一些js表达式，这些表达式的输出将插入到JSX中的html标记中。所以Brad的解决方案会很顺利地出现在你面前

而且


map
在ES5标准中：
通常，
map
为您提供了一种简单而富有表现力的语法，可以使用所需的元素将数组更改为另一个数组，例如
var id=users.map（（user）=>{return user.id；}）。因此，如果您不希望看到一个新的数组，而只是对每个元素做一些事情，那么使用for（i…）loop（对于ES5）和for（of…）loop（对于ES6）对我来说是一种更好的做法。但这确实只是风格/品味的问题：）

使用classnames实用程序是一种很好的组合此类内容的方法，您可以在
{…}
中放置任意JavaScript表达式。所以你所需要的就是
{'prefix'+someValue}
。在你问新问题之前，请使用搜索功能。谢谢。我在问之前做了研究。