Question

我目前使用react js动态呈现<div id="results">标记内的api的搜索结果。域结果呈现如下：

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

我有css应用于div本身但是如何根据DOM元素内的innerHtml应用“css内容”（例如基于实际单词的正则表达式）。我问这个的目的是因为我想基于返回域的tld在css中添加一些东西，如果我得到一个.com网站，Id就像css一样知道在div元素里面有一个名为.com的网站是渲染然后动态应用它以包含所有其他的相同内容。

.results {

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

等等。

Answer 1

你会有类似的东西：

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

其中，结果将是从api获取数据后在适配器中创建的对象。

然后，您将以一种基于tld将其分组的方式对其进行调整。

JedWatson/classnames会为您提供动态的classNames

我需要一种基于DOM innerhtml值应用css内容的动态方法

1 个答案: