DOM innerhtmlの値に基づいてCSSコンテンツを動的に適用する必要があります

Question

私は現在、react jsを使用して、<div id="results">タグ内のAPIの検索結果を動的にレンダリングしています。私はCSSのdiv自体に適用した

<div id="results">yahoo.com 
bracket.io 
codepin.io 
samplesite.net 
</div> 

が、どのように私はDOM要素の中にinnerHTMLプロパティ（実際の言葉に基づいて例えば正規表現）に基づいて「CSSのコンテンツを」適用行います。ドメインの結果は次のようにレンダリングします。私がこれを求めているのは、返されたドメインのtldに基づいてCSSに何かを追加したいのですが、.comサイトを取得した場合、cssのように、div要素の中に.comという名前のサイトがこれを動的に適用して、他のすべてのものにも同じものを含めるようにします。

.results { 

content: site .com was rendered; 
content: site .net was rendered; 
} 

など。

Answer 1

次のようなものを持っているでしょう：結果は、あなたのAPIからデータを取得した後、アダプタで作成されたオブジェクトになり

render() { 
    <div className='results'> 
    { this.props.results.map ((tld) => { 
     <span className=classNames({ [`results__${tld}`]: true });> 
     // list of results 
     </span> 
    } 
    </div> 
} 

。

これを、tldに基づいてグループにソートする方法で調整します。

JedWatson/classnamesは、最も簡単な解決策は、動的ラッパーのdivにクラスを追加することであるあなたに、動的クラス名