Question

我有一个maps和array的函数，并检查每条记录的状态。每月的状态为1,2或3，在if语句中进行检查。然后这些返回一些改变图标颜色的CSS。

_infoIconStyle() {

    //test array
    let monthArr = [
        {month:'jan', status: 1},
        {month:'feb', status: 2},
        {month:'mar', status: ''},
        {month:'apr', status: 1},
        {month:'may', status: 2},
        {month:'jun', status: ''},
        {month:'jul', status: 1},
        {month:'aug', status: 2},
        {month:'sep', status: ''},
        {month:'oct', status: 1},
        {month:'nov', status: 2},
        {month:'dec', status: ''}
    ]
    //

    monthArr.map((monthRecord) => {

        if(monthRecord.status == 1) {
            const infoStyle = { 
                color:  "red"
            };

            return infoStyle

        } else if(monthRecord.status  == 2) {
            const infoStyle = { 
                color:  "orange"
            };

            return infoStyle

        } else {
            const infoStyle = { 
                color:  "green"
            };

            return infoStyle

        } 
    })
}

我在没有map的情况下看到了我在console.log中的预期。但是，自从我添加了map后，没有返回CSS。

我没有长时间使用ES6，我确信这很简单。有人可以帮忙..谢谢你。

Answer 1

也许这对你来说是一个答案，我认为你的回报还不够，你没有默认状态，在我看来你应该尝试类似的东西，但我也是ES6的新手，只是一个提示：

let newcssvar =    monthArr.map((monthRecord) => {
   let infoStyle={color:"defaulcolor-whatever"};
    if(monthRecord.status == 1) {
         infoStyle = { 
            color:  "red"
        };

        return infoStyle

    } else if(monthRecord.status  == 2) {
         infoStyle = { 
            color:  "orange"
        };

        return infoStyle

    } else {
         infoStyle = { 
            color:  "green"
        };

        return infoStyle

    }

  return infoStyle

})

Answer 2

因为您没有从_infoIconStyle函数返回任何内容。另一件事是 map将返回一个数组而不是一个css对象。

返回map的结果：

_infoIconStyle(){
   ....
   return monthArr.map((monthRecord) => {   //use return here
       ....
   }
   ....
}

如果您返回地图结果，将返回_infoIconStyle函数：

[{...}, {...}, {...}, {..}, {...}, ....]

Answer 3

因此map函数实际上返回另一个数组。在您的情况下，您调用map函数但不将输出分配给任何东西。如果您要将其分配给变量，那么您将拥有一系列颜色。你可以尝试的一件事是拥有一个状态和颜色的字典，而不是使用map来获得一个颜色数组。您还可以映射初始数组并将颜色属性附加到monthArr变量中的每个对象。

Answer 4

monthArr.map(monthRecord(month, i) => {
    if(month[i].status == 1) {
        return month[i].color = "red"
    };
    return monthArr

这种类型的函数会在循环中为每个月添加相应的颜色属性。我只写了一个片段，因为我没有时间在工作之前提供完整的答案。您需要一个额外的功能来创建样式表。您是否尝试使用JSX内联呈现样式？我需要更多信息以获得更好的例子。如果您尝试创建新对象而不是修改当前对象，则可以将此功能与object.Assign一起使用..

React.js：使用Map

4 个答案: