反應：如何將類添加到包含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>

關於如何做到這一點的反應的任何想法？

來源

2017-09-01 Matheus Alves

你是如何呈現的細胞？意思是，你是否正在渲染渲染行和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> 
    ) 
}

來源

2017-09-01 20:56:04

反應：如何將類添加到包含innerHTML的元素

回答

相關問題