Элементы React js Dom

На самом деле, response не работает с DOM, он отображает сам DOM, поэтому jquery не может вам помочь, если вы хотите делать такие вещи, я предлагаю вам больше узнать о реакции Ссылки, вы можете справиться с этим, используя ref и onclicks, надеюсь, это поможет вам.

вы можете добавить собственный код js в componentDidMount и использовать e.target.cellIndex для td и e.target.rowIndex для row

const tds = window.document.getElementsByTagName("td");
for(var i = 0; i<= tds.length -1;i++){
    tds[i].addEventListener("mouseup", e => {
    console.info(`cell ${e.target.cellIndex +1}` , `Row : ${e.target.parentElement.rowIndex + 1}`);
  })
}

живая демонстрация в реакции на коде: https://codepen.io/anon/pen/oJdjJW?editors=1010

надеюсь, я смогу помочь тебе

вы не должны трогать DOM самостоятельно, это убьет цель реакции

вместо этого ваши слушатели событий должны быть выражены в вашем компоненте, и реагирование будет обрабатывать их

внутри это означает, что реакция будет вызывать addEventListener и removeEventListener, когда это необходимо, среди других полезных опций.

сначала ваши данные должны быть структурированы как вложенный массив а затем нанесите на карту свои строки и ячейки

благодаря мощности Array.prototype.map у вас будет доступ к индексам строк и ячеек

rows.map((row, rowIndex) => (
    <div>
      {row.map((cell, cellIndex) => (
        <div
          onClick = {() => {
            console.info(`you clicked on ${rowIndex}, ${cellIndex}`)
          }}
        >
          {cell}
        </div>
      ))}
    </div>
  ))

вот рабочий пример в codeandbox https://codesandbox.io/s/6zw42m4pxw

Вы можете добиться этого с помощью комбинации onMouseOver, setState и динамического стиля:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null
        }
    }
    render() {
        return (
            <div>
                <p>User is hovering over ({this.state.x}, {this.state.y})</p>
                <table>
                    {(new Array(10)).fill().map((_, y) => (
                        <tr>
                            {(new Array(10).fill().map((_, x) => (
                                <td
                                onMouseEnter = {() => this.setState({x,y})}
                                style = {{backgroundColor: (this.state.x==x || this.state.y==y) ? 'red' : 'grey'}}
                                ></td>
                            )))}
                        </tr>
                    ))}
                </table>
            </div>
        )
    }
}

ReactDOM.render((<App/>), document.querySelector('#root'));

table {
  border-collapse: 'collapse'
}

td {
  padding: 1em
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id = "root"></div>