Question

我正在尝试使用具有自定义数量的表行的React和React-Bootstrap创建一个表。该表应该存储有关某个视频游戏的玩家统计信息的数据，并且基于视频游戏的统计信息可能会更改，因此行数和这些行的标题也必须能够动态更改。我想在保存当前统计信息列表的状态下创建一个数组，然后使用map函数将此数组映射到一个元素并呈现表。但是，在尝试了几种方法之后，我无法获得任何要渲染的自定义输入。下面是代码：

Class Structure

class Statistics extends Component {
  constructor(props) {
    super(props)
    this.state = {
      game: '',
      player_names: [],
      positions: [],
      stat_categories: [
        'kills',
        'deaths',
        'assists'
      ]
    }
  }

  renderTableRows(array) {
    return (
      <tr>
        <th> NAME </th>
        <th> TEAM </th>
        <th> POSITION </th>
        { array.map(item => {
            console.log(item)
            <th key={item}> {item} </th>
          })
        }
      </tr>
    )
  }

  render() {
    const columnLength = this.state.player_names.length
    const statCols = this.state.stat_categories

    return (
      <div>
        <MyNav url={this.props.location.pathname} />
        <Table responsive striped bordered hover>
          <thead>
            { this.renderTableRows(statCols) }
          </thead>
        </Table>
      </div>
    )
  }
}

控制台还可以正确记录状态（杀死，死亡，助攻）中的数据-因此问题出在渲染元素时。任何帮助将不胜感激！

Answer 1

在地图函数中，renderTableRows中没有return语句。

使用ES6箭头功能时，您可以：

不使用return语句直接返回数据
```
(args) => (returnedData);
```

或者添加一些逻辑，而不仅仅是直接返回

(args) => {
  // Logic here

  return returnedData
}

在第二种情况下，您将需要一个return语句，因为您正在记录日志，如果您选择删除日志记录，请采用第一种方法。

另外，请直接在您的问题中发布代码，因为使用图片会降低其可读性，也不会被搜索引擎索引。

Answer 2

您必须在单独的tr中渲染每个项目，而不是在一系列th中渲染

renderTableCols(array) {
  return array.map(item => <th>{item}</th>)
}

renderTableColValues(item, cols) {
  return cols.map(col => <td>{item[col]}</td>)
}

renderTableRows(array) {
  return array.map(item =>
    <tr>
      <td>{item.name}</td>
      <td>{item.team}</td>
      <td>{item.position}</td>
      {this.renderTableColValues(item, this.cols)}
    </tr>
  );
}

render() {
  return (
    <Table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>TEAM</th>
          <th>POSITION</th>
          {this.renderTableCols(this.cols)}
        </tr>
      </thead>
      <tbody>
        {this.renderTableRows(items)}
      </tbody>
    </Table>
  );
}

有关表https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

的更多信息

Answer 3

规则：当状态改变时，将调用基于类的组件的render方法。问题：谁将改变状态？它会在组件内部生长吗？你有什么问题？您无法渲染任何东西？还是统计信息不是动态呈现的？如果要动态更改，则需要先更改状态。

Answer 4

对于给您带来什么惊喜，我会给您类似的答案，但它的解决方法有点不同，

因此，您正在尝试创建动态表，但是您要使表行静态化，我所做的就是让表接收头和数据的数组，然后创建所需数量的行或数据。

代码在这里

export function objectIntoTableData(object) {
 return Object.values(object).map((data, index) => {
   return  <td key={index}>{data}</td>;
  });
}

您必须将此索引更改为（value，index）=>，这仅是我的用途

tableRows(data) {
 return data.map(value => {
   return <tr key={value.index}>{objectIntoTableData(value)}</tr>;
 });
}

<thead>
  <tr>
    {head.map((value, index) => {
      return <th key={index}>{value}</th>;
    })}
 </tr>
</thead>
<tbody>{this.tableRows(data)}</tbody>

由于map函数的索引回调，因此不宜在对象内部使用id或索引，因为键不安全。

 <ReactTableUse 
     head={["#", "Cell1", "Cell2", "Cell3"]}
     data={[{id:1, test:1},{id:2, test:2}]} 
 />

使用React动态创建表行

4 个答案: