动态添加单元格到表格行并使用reactjs动态创建表格行答案

【问题标题】：Dynamically add cells to table rows and dynamically create table rows with reactjs动态添加单元格到表格行并使用reactjs动态创建表格行
【发布时间】：2017-03-31 04:38:02
【问题描述】：

我正在 reactjs 中动态构建一个 tbody。我有一个从循环中创建种子数据的函数：

accounts.push(
  <tr key={i}>
  <td>{obj.type}</td>
  <td>{obj.name}</td>
  <td>{obj.balance}</td>
  <td>{obj.id}</td>
</tr>);

它有效，我可以填充行以响应 <tbody>{accounts}</tbody>。现在我正在尝试动态添加<td>。我尝试了以下方法，但它创建了一个字符串，ReactJS 抛出错误Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>:

let fields = ['type', 'name', 'balance', 'id'];

data.forEach( function(element, index) {
  let fieldsLabel = `<tr key=${++i}>`;
  fields.forEach( function(key, index) {
    fieldsLabel = fieldsLabel.concat(`<td>${element[key]}</td>`);
  });
  fieldsLabel = fieldsLabel.concat(`</tr>`);
  accounts.push(Array.from(fieldsLabel));
});

我想做一些简单的事情，如下所示，但由于打开了<tr> 标签，它不起作用：

    data.forEach( function(element, index) {
      let row = []
      row.push(<tr key={++i}>)
      fields.forEach( function(key, index) {
        row.push(<td>{element[key]}</td>)
      });
      row.push(</tr>)
      accounts.push(row.join(''));
    });

如何将<td> 动态推送到数组中，以便可以在 {accounts} 这样的 reactjs 中使用？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

以下将动态添加单元格到表格行并动态创建表格行供您在组件中使用。

class TbodyRow extends React.Component {
  constructor() {
    super()
    this.createRow = this.createRow.bind(this);
  }

  createRow(tableRowID, data, dataOrder, cells = []) { 
    for (let i in dataOrder) {
      cells.push(<td key={i}>{data[dataOrder[i]]}</td>)
    }
    return (<tr key={tableRowID}>{cells}</tr>);
  }

  render() {
    return this.createRow(
      this.props.tbodyIdKey, 
      this.props.rowData, 
      this.props.dataOrder
    );
  }
}

将数据单元格 (<td>) 添加到一行 (<tr>)：将其放入循环数据数组的方法中（即 [obj, obj, obj].forEach...）：

let fields = ['type', 'name', 'balance', 'id'];
accounts.push(
  <TbodyRow key={obj.id}
    tbodyIdKey={obj.id} 
    rowData={obj} 
    dataOrder={fields}
  />
);

然后根据要求在您的 tbody 中使用：

<tbody>
  {accounts}
</tbody>

【讨论】：

【解决方案2】：

试试这个

data.map((item,i) => {
  return(
    <tr key={++i}>
      {fields.length > 0 && fields.map((field,j) => {
         return(
            <td>{item[field]}</td>
         )
      })
    </tr>
  );
});

【讨论】：

【解决方案3】：

你如何动态地推入一个数组，以便它可以在像 {accounts} 这样的 reactjs 中使用？

您的想法是正确的，但是您将 string 存储到 fieldsLabel 而不是 JSX 元素中。不要用反引号包裹你的元素。

不要使用字符串来创建元素。请记住，JSX 转换为 React.createElement 调用。如果你使用字符串创建一个元素，那么 babel 不会转换它。 Refer to the reactjs documentation 了解有关 JSX 工作原理的更多信息。

【讨论】：