动态类名与数据映射 ES6
动态类名与数据映射 ES6
新学习Reactjs，帮助我定义data.map的classname，例如classname="plan-{plan.flag}"（渲染为class="plan-red"）。我如何在双引号内包含data的值？
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 (
{
data.map(function(plan,i){
return (
Plan
{plan.plnm2}
Id
{plan.plid7}
Opp
{plan.adas4}
Mps Id
{plan.llst1}
);
})
}
);
}
}
动态类名与数据映射 ES6
在设置类名时，请记住连接操作符+是由JavaScript执行的。因此，应该将整个className包裹起来来构建字符串：
<div className={"data-wrapper plan-" + plan.flag} key={i}>
这样就可以正常运行了。
问题原因：在设置类名时，使用了连接操作符+。然而，JavaScript在执行连接操作时，会将字符串和其他变量进行拼接，而不会自动将其转换为字符串。这就导致了在构建类名时出现了错误。
解决方法：为了避免这个问题，应该将整个类名字符串包裹在花括号中，并使用连接操作符+来拼接字符串和变量。这样，JavaScript就会正确地将它们连接起来，生成正确的类名。
示例代码中的解决方法是将整个类名字符串包裹在花括号中，并使用连接操作符+来将字符串"plan-"和变量plan.flag拼接起来。这样就能够正确地生成类名，并解决了动态类名与数据映射的问题。
动态类名与数据映射 ES6
在React的JSX中，我们可以像编写模板语言一样编写代码，这意味着我们在return语句中编写的
将被直接添加到HTML页面中。当我们想要在其中添加动态部分时，我们可以使用{}来包含一些JavaScript表达式，其输出将插入到JSX中的HTML标签中。因此，Brad的解决方案非常顺利地解决了这个问题。
此外，
- map是ES5标准中的一个方法，通常用于将一个数组转换为另一个数组，并选择性地获取其中的元素，例如var ids = users.map((user)=>{return user.id;})。因此，如果你只是想对数组中的每个元素进行操作而不是生成一个新数组，使用for(i...)循环（对于ES5）和for(..of..)循环（对于ES6）可能是更好的做法。当然，这只是一种风格/口味的问题 🙂
动态类名与数据映射 ES6 的问题及解决方法
在开发过程中，我们经常需要根据不同的数据动态地给元素添加类名。在 React 中，通常使用 className 来给元素添加类名。但是，有时候我们需要根据数据的不同来动态地生成类名，这就需要用到动态类名与数据映射的技术。
一种常见的解决方法是使用 ES6 的模板字符串（Template Strings）。模板字符串是 ES6 中的新特性，用反引号（`）包裹起来的字符串。在模板字符串中，我们可以使用变量、表达式等来动态地生成字符串。使用模板字符串可以方便地拼接字符串，并且可以在字符串中嵌入变量和表达式。
下面是一个使用模板字符串生成动态类名的示例代码：
在这个示例中，我们使用了模板字符串来生成动态类名。`${plan.flag}` 是一个表达式，它会根据 plan 对象的 flag 属性的值来生成类名。这样，每个元素的类名都会根据不同的数据而动态改变。
使用模板字符串生成动态类名的好处是代码简洁、可读性强。我们不需要手动拼接字符串，而是直接在模板字符串中插入变量和表达式。
总结起来，动态类名与数据映射 ES6 的问题可以通过使用模板字符串来解决。模板字符串可以方便地生成动态类名，使代码更加简洁和可读。
参考链接：
- [Template Strings](https://babeljs.io/docs/learn-es2015/#template-strings)