Есть ли чистый способ условно стилизовать ячейку/rowColumn в таблице «реагировать-виртуализировать» на основе ее содержимого?

Question

Я использую «реагировать-виртуализировать», чтобы создать таблицу. В этой таблице некоторые данные могут отображаться как '<b>Brian Vaughn1</b>'. Эта ячейка таблицы должна иметь font-weight: bold, и только текст должен отображаться без тегов. Например:

Мне удалось решить это, используя ReactDOM.findDOMNode (чего следует избегать, как я понимаю), но я думаю, что должен быть лучший, более чистый способ сделать это. Вот мой код:

import React, { Component } from 'react'; 
import { Column, Table } from 'react-virtualized'; 

import './chart-table.scss'; 

class ChartRTable extends Component{ 
    constructor(props){ 
    super(props); 
    this.handleScroll = this.handleScroll.bind(this); 
    } 


    getColumns(data){ 
    const columnsNumber = data.namesForColumns.length; 
    const columnWidth = this.props.tableWidth/columnsNumber; 
    let namesForColumns = ['name', 'description']; 
    return namesForColumns.map(name => { 
     return (
     <Column 
      label={name} 
      dataKey={name} 
      width={columnWidth} 
     /> 
    ) 
    }) 
    } 


    handleScroll(){ 
    // not a very nice way to make use of <b> tags in data 
    let dom = ReactDOM.findDOMNode(this); 
    let all = dom.getElementsByClassName('ReactVirtualized__Table__rowColumn'); 
    let texts = [].slice.call(all).filter((text) => text.innerHTML.indexOf('&lt;') > -1); 
    texts.map((el) => { 
     let text = el.innerHTML; 
     let newText = text.replace(/&lt;b&gt;/g, '').replace(/&lt;\/b&gt;/g, ''); 
     el.innerHTML = newText; 
     el.style.fontWeight = 'bold'; 
    }) 
    } 

    componentDidMount(){ 
    this.handleScroll(); 
    } 

    render() { 
    // dummy data 
    const list = [ 
     { name: 'Brian Vaughn', description: '<b>Software engineer1</b>' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: '<b>Brian Vaughn1</b>', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: '<b>Brian Vaughn</b>', description: '<b>Software engineer</b>' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
     { name: 'Brian Vaughn', description: 'Software engineer' }, 
    ]; 
    return(
     <Table 
     onScroll={this.handleScroll} 
     ref='table' 
     width={this.props.tableWidth} 
     height={this.props.tableHeight} 
     headerHeight={35} 
     rowHeight={37} 
     rowCount={list.length} 
     rowGetter={({ index }) => list[index] } 
     > 
     {this.getColumns(this.data)} 
     </Table> 
    ) 
    } 
}; 

//TODO PropTypes 

export default ChartRTable; 

Любые идеи?

Answer 1

Вид странный, видя мое собственное имя, оштукатуренное по всему вопросу StackOverflow. :)

Лучший способ сделать это - использовать пользовательский columnRenderer, как я делаю в примере here. Так что в вашем предыдущем случае, можно удалить и заменить handleScrollgetColumns с чем-то вроде этого:

getColumns(data){ 
    const columnsNumber = data.namesForColumns.length; 
    const columnWidth = this.props.tableWidth/columnsNumber; 

    let namesForColumns = ['name', 'description']; 

    return namesForColumns.map(name => { 
    return (
     <Column 
     label={name} 
     dataKey={name} 
     width={columnWidth} 
     cellRenderer={ 
      ({ cellData, columnData, dataKey, rowData, rowIndex }) => { 
      const shouldHighlight = cellData.indexOf('<b>') === 0 
      const text = cellData.replace(/<\/*b>/g, '') 

      return shouldHighlight 
       ? <strong>{text}</strong> 
       : text 
      } 
     } 
     /> 
    ) 
    }) 
}