Question

    const healthItemStyle={
        backgroundColor:'green'
    };

    const warningItemStyle={
        backgroundColor:'yellow'
    };

    const errorItemStyle={
        backgroundColor:'red'
    };

    const scenario  = ['AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'];
    const scenarioHealth  = ['health','warning','health','health','error'];

    const items=scenario.map((item,index)=>{
        return(
            <ListItem style={`${scenarioHealth[index]}ItemStyle`}>
                <ListItemText primary={item} secondary={scenarioHealth[index]}/>
            </ListItem>
        )
    });

如上面的代码所示，我希望能够动态生成标签样式属性的变量名称。我已经尝试了很多，例如${scenarioHealth[index]}ItemStyle 但显然这是行不通的。所以问你有什么好办法吗？

Answer 1

用方括号符号包装它们以使用computed property，并将所有*ItemSyle都放在对象中：

const allStyles = {
  healthItemStyle: {...},
  ...
}

<ListItem style={allStyles[`${scenarioHealth[index]}ItemStyle`]}>

这里只是example sandbox。

Answer 2

也许您可以将样式选项集中到一个对象中，然后在渲染<ListItem/>组件时动态选择它们，如下所示：

const allStyles = {
  healthItemStyle : {
      backgroundColor:'green'
  },
  warningItemStyle : {
      backgroundColor:'yellow'
  }, 
  errorItemStyle : {
      backgroundColor:'red'
  }
};

const scenario  = [
  'AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'
];
const scenarioHealth  = [
  'health','warning','health','health','error'
];

const items=scenario.map((item,index)=>{

    const styleKey = `${ item }ItemStyle`;
    const style = allStyles[ styleKey ];

    return(
        <ListItem style={ style }>
            <ListItemText primary={item} secondary={scenarioHealth[index]}/>
        </ListItem>
    )
});

Answer 3

您已经关闭。

请记住，React组件的style属性想成为一个对象。

您在这里做什么：

style={`${scenarioHealth[index]}ItemStyle`}>

只是将其设置为字符串。

相反，请像这样查找对象映射：

    const styles = {
      health: {
        backgroundColor:'green'
      },

      warning: {
         backgroundColor: 'yellow'
      }, 

      error: {
        backgroundColor: 'red'
      }
    }

    const scenario  = ['AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'];
    const scenarioHealth  = ['health','warning','health','health','error'];

    const items=scenario.map((item,index)=>{
        return(
            <ListItem style={styles[scenarioHealth[index]]}>
                <ListItemText primary={item} secondary={scenarioHealth[index]}/>
            </ListItem>
        )
    });

顺便说一句-您可能想看看react-jss，它看起来很像您在这里所做的。

Answer 4

${scenarioHealth[index]}ItemStyle为您提供了正确的字符串，但是您需要访问变量持有的值。

您可以更改定义变量的方式。例如。定义一个名为bgColors的对象并将其映射到其颜色：

const bgColors = {
    healthItemStyle: 'green',
    warningItemStyle: 'yellow',
    errorItemStyle: 'red'
}

然后您可以访问如下颜色：

bgColors[`${scenarioHealth[index]}ItemStyle`]

如何在react.js中向变量名添加另一个变量值

4 个答案: