帶數據映射的動態類名ES6

-1

Reactjs的新功能。幫我定義data.map classname。像classname =「plan- {plan.flag}」（將被渲染爲class =「plan-red」）。如何在雙引號內包含數據值？帶數據映射的動態類名ES6

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> 
    ); 
    } 
}

來源

2016-05-15 tv3free

https://github.com/JedWatson/classnames 使用的類名效用事情是一個非常好的方式來組成的各種事情 – thsorens

你可以把'{...}'中的任意JavaScript表達式。所以你需要的只是'{'前綴'+ someValue}'。 –

在提出新問題之前，請使用搜索。 –

當你設置你的類名記住從+的CONCAT正在由JavaScript完成。

所以包住整個類名，而不是建立字符串：

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

，你應該是好去。

來源

2016-05-15 03:43:45

Template Strings將是最好的解決方案。

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

來源

2016-05-15 03:52:00 Not

東西除了布拉德的回答是：做出反應的JSX是像一個模板語言，這意味着那些<div></div>是你在return語句寫會被逐字加入到HTML頁面。然後當你需要動態部分時，你可以使用{}來包含一些js表達式，這些表達式的輸出將被插入到JSX中的html標籤中。所以Brad的解決方案可以順利地找到你。

此外，

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）感覺更好練習給我。但相信這是隻是風格/味道:)

來源

2016-05-15 04:01:41

帶數據映射的動態類名ES6

回答

相關問題