根据 id 动态设置 html 元素样式

Question

我想根据自己的 id 为不同的元素着色。如果他们的 id 在我提供的 id 列表中，则将其设为一种颜色，否则，将其设为另一种颜色。

在下面的示例中，有 4 个 div，每个都有不同的颜色。如何在不为每个 div 定义 css 规则的情况下根据他的 id 为每个 div 着色？

const Main = () => {
return (
    <React.Fragment>
    <div id='1' style={{background: 'red'}}>1</div>
    <div id='2' style={{background: 'blue'}}>2</div>
    <div id='3' style={{background: 'green'}}>3</div>
    <div id='4' style={{background: 'cyan'}}>4</div>
  </React.Fragment>
    )
}

https://jsfiddle.net/9debt3cL/19/

如果问题不是很清楚，请告诉我。

更新：上下文：我有一个 svg 蓝图，分为多个部分，每个部分都有一个唯一的编号。我必须获取一些包含蓝图编号的某些部分的数据，并根据这些编号填充蓝图路径。

Answer 1

这是您尝试的更新 jsfiddle：https://jsfiddle.net/fyLab6zr/21/

不确定这是否正是您想要的，但颜色是在 css 中指定的，因此应该给出特定颜色的 id 列表，以及所有不匹配的默认颜色：

.background {
  background: red;
}

.background-1, .background-2 {
  background: blue;
}

.background-3, .background-4 {
  background: green;
}

然后你有一个 ids 列表，你可以遍历它来填充特定的 ids 行。 传入background-${id}中的id，设置className等于对应的id。如果存在，它将被设置样式，或者使用后备“背景”类

const Main = () => {
const ids= [1,1,3,2,1,3,4,5, 6, 1]
return (
    <React.Fragment>
    {ids.map((id) => {
        return <div id={id} className={`background background-${id}`}>{id}</div>  
    })}
  </React.Fragment>
    )
}

ReactDOM.render(<Main />, document.querySelector("#app"))

编辑：

这种方法会创建您预定义的 id 列表，在本例中是两个列表，导致两种不同的颜色。如果没有匹配，它仍然默认返回background。 getColor 函数根据 id 给出正确的 className。您还可以根据需要预定义任意数量的元素。

const color1 = [1,2]
const color2 = [3,4]

const getColor = (id) => {
   return color1.includes(id) ? 1 : color2.includes(id) ? 2 : -1
}

return (
    <React.Fragment>
        <div id="1" className={`background background-${getColor(1)}`}>1</div>
        <div id="2" className={`background background-${getColor(2)}`}>2</div> 
        <div id="3" className={`background background-${getColor(3)}`}>3</div>   
        <div id="4" className={`background background-${getColor(4)}`}>4</div> 
        <div id="5" className={`background background-${getColor(5)}`}>5</div> 
    </React.Fragment>
    )
}

ReactDOM.render(<Main />, document.querySelector("#app"))

Answer 2

你可以这样：

const Main = () => {
  const coloredIds = ['1', '4'];

  const getBackgroundColor = (id) => {
     return coloredIds.includes(id) ? 'cyan' : 'red';
  }

  return (
    <React.Fragment>
      <div id='1' style={{background: getBackgroundColor('1')}}>1</div>
      <div id='2' style={{background: getBackgroundColor('2')}}>2</div>
      <div id='3' style={{background: getBackgroundColor('3')}}>3</div>
      <div id='4' style={{background: getBackgroundColor('4')}}>4</div>
    </React.Fragment>
  );
}

或者如果你有多种颜色

const getBackgroundColor = (id) => {
  switch (id) {
    case '1':
      return 'red';
    case '2':
      return 'blue;
    case '3':
      return 'green';
    case '4':
    default:
      return 'cyan';
  }
}

Answer 3

我认为 Wanz 有正确的方法，您可以创建具有所需属性的 css 类。然后将这个类添加到 dom 元素，如果它对应于 switch case。 像这样：

  var element = document.getElementById("myDIV");
  switch (expr) {
  case 'id1':
  element.classList.add("styleId1");
  break;
  case 'id2':
  element.classList.add("styleId2");

  case 'id3':
  element.classList.add("styleId3");

  break;
  default:
    console.log(`no matching id`);
}

Answer 4

不完全确定它是否会起作用，但您可以随时尝试，使用 javascript 查看开关盒。设置表达式，根据值等有不同的情况。在这个例子中可以是 Id，根据情况有不同的结果。