我想根据不同元素自己的ID给它们着色。如果他们的id在我给出的id列表中，则将其设置为一种颜色，如果不是，则将其设置为另一种颜色。

在下面的示例中有4个div，每个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/

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

update:context:我有一个svg蓝图，分为多个部分，每个部分都有一个唯一的数字。我必须获取一些数据，其中包含蓝图数字的某些部分，并根据这些数字来填充蓝图路径。

---

顺晟科技：

您可以这样做:

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

或如果您有多种颜色

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

不完全确定它是否可以工作，但您可以尝试一下，使用JavaScript研究一下开关的情况。设置表达式并根据值具有不同的大小写。在本例中可以是Id，并根据大小写具有不同的结果。

我认为Wanz的方法是正确的，您可以创建具有所需属性的css类。然后将该类添加到dom元素中，如果它对应于开关情况。 如下所示:

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

以下是您尝试的最新jsfiddle:https://jsfiddle.net/fylab6zr/21/

不确定它是否是您想要的，但是颜色是在css中指定的，所以应该给出特定颜色的ID列表，以及所有不匹配的ID的默认颜色:

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

，然后您就有了一个ids列表，您可以对其进行迭代以填充特定的ids行。 传入id in以将className设置为等于相应的id。然后，如果它存在，将对它进行样式化，或者使用回退的'background'类

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

编辑:

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

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