React table 渲染成一行的形式

Question

这里有点像 React 菜鸟，所以请不要评判。

react table 正在以行的形式呈现。

我的组件：

import React, { Component } from 'react';
import ReactTable from 'react-table';
// import 'react-table/react-table.css';

class Variants extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const columns = [
      {
        Header: 'Gene',
        accessor: 'gene'
      },
      {
        Header: 'Nucleotide Change',
        accessor: 'nucleotide_change'
      },
      {
        Header: 'Protein Change',
        accessor: 'protein_change'
      },
      {
        Header: 'Other Mappings',
        accessor: 'other_mappings'
      },
      {
        Header: 'Alias',
        accessor: 'alias'
      },
      {
        Header: 'Transcripts',
        accessor: 'transcripts'
      },
      {
        Header: 'Region',
        accessor: 'region'
      },
      {
        Header: 'Reported Classification',
        accessor: 'reported_classification'
      },
      {
        Header: 'Inferred Classification',
        accessor: 'inferred_classification'
      },
      {
        Header: 'Source',
        accessor: 'source'
      },
      {
        Header: 'Last Evaluated',
        accessor: 'last_evaluated'
      },
      {
        Header: 'Last Updated',
        accessor: 'last_updated'
      },
      {
        Header: 'More Information',
        accessor: 'url',
        Cell: e => (
          <a target="_blank" href={e.value}>
            {' '}
            {e.value}{' '}
          </a>
        )
      },
      {
        Header: 'Submitter Comment',
        accessor: 'submitter_comment'
      }
    ];
    if (this.props.variants && this.props.variants.length > 0) {
      return (
        <div>
          <h2>
            {' '}
            There are {this.props.variants.length} variants of this gene!
          </h2>
          <div>
            <ReactTable
              data={this.props.variants}
              columns={columns}
              defaultPageSize={3}
              pageSizeOptions={[3, 5, 10, 50, 100]}
            />
          </div>
        </div>
      );
    } else {
      return [];
    }
  }
}

export default Variants;

出于某种奇怪的原因，它正在将整个 table 渲染为一行。我附上了图片以显示正在发生的事情。此外，分页按钮也不是很好。可以修改吗？

有没有人遇到过类似的问题？

Answer 1

我让它在下面工作。我简化了数据，因为您没有提供示例数据集，但这应该对您有所帮助。

我唯一认为你错的是你需要取消注释 import 'react-table/react-table.css'; 或者你可能在 <Variants variants={variants}/>

中传递了错误的道具

Variants.js

import React, { Component } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

class Variants extends Component {

  render() {
    const columns = [
      {
        Header: 'Gene',
        accessor: 'gene'
      },
      {
        Header: 'Nucleotide Change',
        accessor: 'nucleotide_change'
      },
      {
        Header: 'Protein Change',
        accessor: 'protein_change'
      }
    ];
    if (this.props.variants && this.props.variants.length > 0) {
      return (
        <div>
          <h2>
            {' '}
            There are {this.props.variants.length} variants of this gene!
          </h2>
          <div>
            <ReactTable
              data={this.props.variants}
              columns={columns}
              defaultPageSize={3}
              pageSizeOptions={[3, 5, 10, 50, 100]}
            />
          </div>
        </div>
      );
    } else {
      return [];
    }
  }
}

export default Variants;

App.js

import React from 'react';
import './App.css';
import Variants from "./Variants";

const variants = [
  {
    gene:'a',
    nucleotide_change:'a',
    protein_change:'a'
  },
  {
    gene:'b',
    nucleotide_change:'b',
    protein_change:'b'
  }
];

function App() {
  return (
    <div className="App">
      <Variants variants={variants}/>
    </div>
  );
}

export default App;

React table 渲染成一行的形式

React table rendering in the form of a row

reactjs

react-table