Question

这就是我想要的：

Jake J.
Matt D.
Kate K.
Matt H. ...

这是我的代码

renderNames(){
   const names =[
     "Jake J.",
     "Matt D."
     ...
   ]
   names.map((name,i) = > 
      return ( 
        <div><b className = 'b' + i>{name}</b></div>
   )
   return names;
}

我有一个我想要显示的十个名字的列表。我想要做的是创建10个classNames b1，b2 ...然后为它们提供顶部和左侧的所有不同值。但我不认为这是一个好主意，因为如果我想在我的代码中更改某些内容，我将不得不手动编辑所有值。那么有更好的方法来做到这一点。我正在使用Meteor + React + TypeScript + CSS。

由于

Answer 1

如果这是针对css样式的，那么我同意你的疑虑。你知道css选择器nth-child吗？我会将className添加到父div。然后在样式中执行以下操作：

.parent:nth-child(0) { ... } 
... 
.parent:nth-child(9) { ... }

然后你可以简单地从css设置样式。

Answer 2

renderNames(){
   const names =[
     "Jake J.",
     "Matt D."
     ...
   ]
   names.map((name,i) = > 
      return ( 
        <p><b className='name'>{name}</b></p>
   )

   return (
     <div className='container'> 
        {names} 
     </div>);
}

应该适合你。然后在样式表中，您可以设置.container和.container .name。

的样式

css文件有问题

2 个答案: