Question

我在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}等反应中使用？

Answer 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>
  {accounts}
</tbody>

Answer 2

试试这个

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

Answer 3

如何动态推入数组，以便可以在{accounts}等反应中使用？

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

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

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

3 个答案: