如何在React.js中为map生成元素实现无CSS样式？附优化建议

我有如下CSS代码：

.tab-top {
    padding-left: 12%;
    padding-top: 2%;
    color: var(--cloudy-white);
    display: flex;
    flex-direction: row;
    font-family: "NTR Regular";
    font-size: 15px;

}

.tab-top > div {
    text-align: center;
    margin-left: 3%;
    border: 1px red solid;
}

请问如何在以下React.js代码中实现上述样式（不使用CSS文件）？

function Navigation() {
  const topTabs = tabs.map(tab =>
      <div>
        {tab}
      </div>
    );
  return (
    <div className="tab-top">
      {topTabs}
    </div>
  );
}

（tabs已声明）另外我是React.js新手，若上述代码有可优化之处，恳请给出建议。

1. 内联style属性方案 #

直接将CSS样式转换为JavaScript对象，通过style属性绑定到对应元素：

function Navigation() {
  // 父容器样式对象（CSS属性转为驼峰命名）
  const tabTopStyle = {
    paddingLeft: '12%',
    paddingTop: '2%',
    color: 'var(--cloudy-white)',
    display: 'flex',
    flexDirection: 'row',
    fontFamily: '"NTR Regular"',
    fontSize: '15px'
  };

  // 子项样式对象
  const tabItemStyle = {
    textAlign: 'center',
    marginLeft: '3%',
    border: '1px solid red'
  };

  return (
    <div style={tabTopStyle}>
      {tabs.map((tab, index) => (
        <div key={index} style={tabItemStyle}>
          {tab}
        </div>
      ))}
    </div>
  );
}

2. styled-components方案（推荐，更易维护） #

借助styled-components库可以用类CSS语法编写样式，无需单独CSS文件：
首先安装依赖：

npm install styled-components

然后修改组件代码：

import styled from 'styled-components';

// 创建样式化容器组件
const TabTopContainer = styled.div`
  padding-left: 12%;
  padding-top: 2%;
  color: var(--cloudy-white);
  display: flex;
  flex-direction: row;
  font-family: "NTR Regular";
  font-size: 15px;

  /* 直接给子元素设置样式，和原生CSS写法一致 */
  & > div {
    text-align: center;
    margin-left: 3%;
    border: 1px solid red;
  }
`;

function Navigation() {
  return (
    <TabTopContainer>
      {tabs.map((tab, index) => (
        <div key={index}>
          {tab}
        </div>
      ))}
    </TabTopContainer>
  );
}

针对你的新手情况，给出几个关键优化点：

• 添加唯一key属性：列表渲染时必须给每个子元素加key，帮助React高效更新DOM。如果tabs的每个项有唯一ID（比如tab.id），优先用ID作为key；没有的话用索引（注意：列表排序/增删时索引可能不稳定，尽量用唯一标识）。
• 简化组件结构：可以直接在return中写map回调，减少中间变量topTabs，让代码更简洁：

function Navigation() {
  // ...样式定义
  return (
    <div style={tabTopStyle}>
      {tabs.map((tab, index) => (
        <div key={index} style={tabItemStyle}>{tab}</div>
      ))}
    </div>
  );
}

• 语义化命名：如果tabs是导航标签列表，可以将变量名改为navTabs，提升代码可读性。
• 样式复用性：如果后续其他组件需要类似样式，可将样式对象/Styled组件提取到单独的文件中，方便复用。

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