好的，我是 React 的新手，需要帮助阅读/引用 HTML 元素数据属性，甚至是 HTML 标签中的内容 - 通常使用纯 JS（这就是我在 React 应用程序中所做的），我是这样读的：
const postRow = document.getElementById(tableRowId);
;
const author = postRow.getElementsByTagName('td')[0].getAttribute('data-fieldvalue');
const title = postRow.getElementsByTagName('td')[1].getAttribute('data-fieldvalue');
const description = postRow.getElementsByTagName('td')[2].getAttribute('data-fieldvalue');
我有一个名为 Table 的功能组件，我像这样使用它：
<Table
headers={this.state.postsHeaders}
rows={this.state.posts}
editable={this.state.editable}
deletable={this.state.deletable}
onUpdateIconClicked={this.toggleUpdatePostModalView}
onDeleteIconClicked={this.toggleDeletePostModalView}
/>
其中 rows 属性是我正在检索的数据axios。我的表生成了多tr > td行查找。我为每一行都有一个“编辑”CTA，点击后我会打开一个模式，在那里我传递要为每一行编辑的数据。CTA 的 Onclick 调用了这个工作正常的函数：
toggleUpdatePostModalView = (postId, tableRowId) => {
// toggle the confirm delete post view
let showUpdatePostModal = !this.state.showUpdatePostModal;
// when postId and tableRowId are both null that means
// that the view delete confirm modal must remain not
// visible (closed) so have to override the toggle
if (postId === null && tableRowId === null) {
showUpdatePostModal = false;
}
const postRow = document.getElementById(tableRowId);
;
const author = postRow.getElementsByTagName('td')[0].getAttribute('data-fieldvalue');
const title = postRow.getElementsByTagName('td')[1].getAttribute('data-fieldvalue');
const description = postRow.getElementsByTagName('td')[2].getAttribute('data-fieldvalue');
// dont get the elements directly like above https://reactjs.org/docs/refs-and-the-dom.html
this.setState({
...this.state,
showUpdatePostModal: showUpdatePostModal,
postToUpdate: {
postId: postId,
tableRowId: tableRowId,
author: author,
title: title,
description: description
}
});
}
有人指出，问题是，我不应该用获取数据的方式JS（中getElementById和getElementsByTagName，因为虚拟DOM和实际DOM同步问题的功能。所以我会指向https://reactjs.org/docs/refs- and-the-dom.html但如果我tr是一个组件本身，这似乎有效，但实际上，它只是我的 Table 渲染函数中的 HTML，如下所示：
const table = (props) => {
// the following code creates an array from props.header object
// that is an indexed array (0, 1, ..., n) and each value
// contains the key properties that compose object props.header,
// and so, even though in .map() the parameter says 'key'
// this is misleading because in reality it is the VALUE
// (since the key of the array is 0 or 1 or n) but it is called
// 'key' because it is the key in the props.headers object that we
// need to get the info for (.map(function(currentValue, index, arr))
const headersArray = Object.keys(props.headers);
const tableHeaders = headersArray.map(key => {
return <th key={key}>{props.headers[key]}</th>;
});
const editHeader = props.editable === true ? <th key="edit">Edit</th> : null;
const deleteHeader = props.deletable === true ? <th key="delete">Delete</th> : null;
let tableRows = null;
if (props.rows) {
tableRows = props.rows.map((row, key) => {
return (
<tr id={`tr-${key}`} key={key}>
{/* inner loop to dynamically generate the <td>
depending on how many headers there are since
each header corresponds to a key or column in
the table */}
{headersArray.map(tdKey => {
return <td key={tdKey} data-fieldname={tdKey} data-fieldvalue={row[tdKey]} >{row[tdKey]}</td>
})}
{props.editable === true ? <td key="edit"><PencilIcon onClick={() => props.onUpdateIconClicked(row.postId, `tr-${key}`)} /></td> : null}
{props.deletable === true ? <td className="delete-icon-container" key="delete"><TrashIcon onClick={() => props.onDeleteIconClicked(row.postId, `tr-${key}`)} /></td> : null}
</tr>
);
});
}
return (
<table className="table is-striped">
<thead>
<tr>
{tableHeaders}
{editHeader}
{deleteHeader}
</tr>
</thead>
<tbody>
{tableRows}
</tbody>
</table>
);
}
我还读到这些 refs 不应该经常使用 - 那么如果我有一个有 100 行的表怎么办？200？我不确定如何继续并以 React 的方式执行此操作……有人可以帮忙吗？