問題

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名のリストを持っています。私がやりたかったのは、10個のclassNames b1、b2 ...を作成してから、上下に異なる値を与えることでした。しかし、私は私のコードで何かを変更したい場合、私は手動ですべての値を編集する必要があるので、それは良いアイデアだとは思わない。だから、これを行うにはもっときれいな方法があります。私はMeteor + React + TypeScript + CSSを使用しています。

ありがとうございました

Answer 1

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をスタイルすることができます。

Answer 2

これがCSSスタイルの場合は、あなたの懸念に同意します。 あなたはcssセレクタnth-childを知っていますか？ class divを親divに追加します。そしてスタイルでは次のようなことをします：

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

あなたは単純にCSSからアイテムのスタイルを設定できます。