反应：如何将类添加到包含innerHTML的元素

问题描述：

如果表格单元格附加了innerHTML并且添加了类，那么检查表格单元格的最佳方法是什么？反应：如何将类添加到包含innerHTML的元素

我有一个数百个单元格的表格，必须动态地完成它。单元格的内容正在被使用dangerouslySetInnerHTML设置，如下所示：

<td dangerouslySetInnerHTML={this.myFunc('foo')}></td>

我想要做这样的事情：

<td className={document.getElementById(this.id).innerHTML.length === 0 ? '' : 'myClass'} dangerouslySetInnerHTML={this.myFunc('foo')}></td>

关于如何做到这一点的反应的任何想法？

你是如何呈现的细胞？意思是，你是否正在渲染渲染行和td单元格的数据？如果是这样，单元格在渲染时应该知道它是否有数据，你不应该调用document.getElementById。 – stevelacerda7

答

I love the classnames module for adding classnames based on states。

我可能会做这样的事情（请注意，我没有测试的代码，所以可能有语法错误）：

var classNames = require('classnames'); 

renderCell(cell, key) { 
    if (cell.dangerousHTML) { 
     return (
      <td key={i} dangerouslySetInnerHTML={classNames({myClass: cell.dangerousHTML ? true : false})}> 
       // I strongly suggest you look into rendering your elements here rather than using "dangerouslySetInnerHTML" 
      </td> 
     ) 
    } 

    return false 
} 

render() { 
    return (
     <table> 
      {this.props.cells.map((cell, i) => { 
       return this.renderCell(cell, i) 
      })} 
     </table> 
    ) 
}

反应：如何将类添加到包含innerHTML的元素

相关推荐