React实现文本与logo同线对齐及样式属性报错修复

数据老陈

2026-10-26

报错根因

react/style-prop-object 规则要求 React 组件的 style 属性必须接收 JavaScript 对象作为参数，不能传入 CSS 格式字符串。你原代码直接将CSS规则以字符串形式赋值给style，不符合校验规则，才会触发三处报错。

修复与对齐实现

推荐方案：Flex布局实现（更简洁稳定）

去掉冗余的包裹节点，用Flex布局控制对齐，避免inline元素常见的基线错位问题，代码如下：

<div 
  id="container" 
  style={{
    display: 'flex',
    alignItems: 'center',
    columnGap: '8px'
  }}
>
  <Link href="" target="_blank">
    <img
      src={img}
      loading="lazy"
      width="40px"
      height="40px"
      alt=""
    />
  </Link>
  <strong>75</strong>
</div>

alignItems: 'center' 实现子元素垂直居中对齐，彻底解决inline元素默认基线对齐导致的视觉错位
columnGap 自动控制logo和文本的间距，比手动加空格的方式更稳定
所有style属性均传入JS对象，完全消除ESLint报错

兼容方案：保留原DOM结构的修复

如果需要保留原有DOM层级，只需将所有字符串格式的style值改为JS对象格式，同时补充垂直对齐规则即可：

<div 
  id="container" 
  style={{ whiteSpace: 'nowrap' }}
>
  <div 
    id="image" 
    style={{
      display: 'inline',
      verticalAlign: 'middle'
    }}
  >
    <Link href="" target="_blank">
      <img
        src={img}
        loading="lazy"
        width="40px"
        height="40px"
        alt=""
      />
    </Link>
  </div>
  <div 
    id="texts" 
    style={{
      display: 'inline',
      whiteSpace: 'nowrap',
      verticalAlign: 'middle'
    }}
  >
    <strong> 75 </strong>
  </div>
</div>