Question

检查表格单元格是否附加了innerHTML并最后添加一个类的最佳方法是什么？

我有一个包含数百个单元格的表，必须动态执行。使用dangerouslySetInnerHTML设置单元格的内容，如下所示：

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

我想做这样的事情：

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

关于如何在React中做到这一点的任何想法？

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

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

1 个答案: