React：innerHTMLを含む要素にクラスを追加する方法

Question

テーブルセルにinnerHTMLが添付されているかどうかをチェックし、それがあればクラスを追加する最良の方法は何ですか？

私は数百のセルを持つテーブルを持っており、動的にそれを行う必要があります。次のようにセルの内容は、dangerouslySetInnerHTMLを使用して設定されている：

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

私はこのような何かやってみたかった：

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

リアクトでそれを行う方法上の任意のアイデアを？

Answer 1

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> 
    ) 
}