Question

这里有一个React Noobie，所以请不要判断。

react表以行的形式呈现。

我的组件：

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;

出于某种奇怪的原因，它将整个表呈现为一行。我已附上图片以显示正在发生的事情。另外，分页按钮也不好。可以修改吗？

有人遇到类似的问题吗？

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;

以表格形式反应表呈现

1 个答案: