React中如何根据元素ID动态设置样式 无需单独定义每条CSS规则

核心思路 #

不用给每个ID单独写CSS规则，通过动态样式绑定+ID-颜色映射表的方式实现，逻辑可复用，适配大量元素的场景，也兼容异步获取匹配ID的业务需求。

基础实现（对应示例代码场景） #

首先定义全局的ID与对应颜色的映射表，以及未匹配ID的默认颜色，直接在元素的style属性中动态取值即可：

import React from 'react';

// 定义ID-颜色映射表
const idColorMap = {
  '1': 'red',
  '2': 'blue',
  '3': 'green',
  '4': 'cyan'
};
// 未匹配到ID时的默认颜色
const DEFAULT_COLOR = '#999';

const Main = () => {
  // 封装通用的获取颜色方法，可复用
  const getBgColorById = (id) => idColorMap[id] || DEFAULT_COLOR;

  return (
    <React.Fragment>
      <div id='1' style={{background: getBgColorById('1')}}>1</div>
      <div id='2' style={{background: getBgColorById('2')}}>2</div>
      <div id='3' style={{background: getBgColorById('3')}}>3</div>
      <div id='4' style={{background: getBgColorById('4')}}>4</div>
      <div id='5' style={{background: getBgColorById('5')}}>5</div> {/* 匹配失败会显示默认色 */}
    </React.Fragment>
  )
}

如果元素数量很多，可以把ID存在数组里遍历渲染，不用逐个写元素：

const Main = () => {
  const idList = ['1','2','3','4','5'];
  return (
    <React.Fragment>
      {idList.map(id => (
        <div key={id} id={id} style={{background: idColorMap[id] || DEFAULT_COLOR}}>
          {id}
        </div>
      ))}
    </React.Fragment>
  )
}

适配SVG蓝图+异步接口场景 #

针对实际的SVG蓝图业务场景，只需要把背景色属性替换为SVG的fill属性，配合state存储接口返回的ID列表即可：

import React, { useState, useEffect } from 'react';

// 未匹配的默认填充色
const DEFAULT_FILL = '#e0e0e0';
// 匹配到ID的高亮填充色
const HIGHLIGHT_FILL = '#2385bb';

const BluePrint = () => {
  // 存储接口返回的需要高亮的蓝图ID列表
  const [highlightIds, setHighlightIds] = useState([]);

  // 组件挂载时请求接口获取高亮ID
  useEffect(() => {
    // 替换为实际接口请求逻辑
    fetch('/api/blueprint/highlight-ids')
      .then(res => res.json())
      .then(data => {
        // 假设接口返回的是ID数组：['1','3','5']
        setHighlightIds(data.ids);
      })
  }, []);

  // 封装获取SVG填充色的方法
  const getFillColor = (id) => highlightIds.includes(id) ? HIGHLIGHT_FILL : DEFAULT_FILL;

  return (
    <svg width="800" height="600" viewBox="0 0 800 600">
      {/* 各个蓝图区块路径，直接调用方法获取填充色即可 */}
      <path id="1" d="M0 0h100v100H0z" fill={getFillColor('1')} />
      <path id="2" d="M100 0h100v100H100z" fill={getFillColor('2')} />
      <path id="3" d="M200 0h100v100H200z" fill={getFillColor('3')} />
      {/* 其余SVG区块同理 */}
    </svg>
  )
}

性能优化建议 #

如果匹配的ID数量较大（超过1000），可做以下优化：

• 将highlightIds转成Set结构，查询时间复杂度会从O(n)降到O(1)，提升渲染性能：

  const getFillColor = (id) => new Set(highlightIds).has(id) ? HIGHLIGHT_FILL : DEFAULT_FILL;
  

• 也可以在接口返回数据时直接转成Set存储，避免每次渲染都重复转换：

  .then(data => setHighlightIds(new Set(data.ids)))
  

内容的提问来源于stack exchange，提问作者Ghost