0

反応テーブルから利用可能な小道具をアウトソーシングしたい。いくつかのウェブサイトを検索しましたが、このケースについては何も見つかりませんでした。このケースの背景は、このテーブルを複数回使用したいが、テーブルを何度も初期化したくないということです。

<ReactTable
  className='-striped -highlight mb-3'
  filterable
  data={this.state.data}
  loading={this.state.loading}
  sortable={true}
  multiSort={true}
  showPageJump={true}
  showPagination={false}
  showPageSizeOptions={true}
  collapseOnDataChange={true}
  collapseOnPageChange={true}
  collapseOnSortingChange={true}
  freezeWhenExpanded={true}
  resizable={false}
  pageSize={this.state.data.length}
  filtered={this.state.filtered}
  onFilteredChange={filtered => this.setState({ filtered })}
  columns={this.state.columns}
/>

このコードから、次の小道具を外注したいと思います。

  • クラス名
  • マルチソート
  • showページネーション
  • サイズ変更可能
  • 等

これをどのように外部委託するか、何か考えがありますか?

よろしくMCW

4

1 に答える 1

2

コンポーネント ロジックを再利用するための React の手法である高次コンポーネント (HOC)を探しているようです。HOC は React API の一部ではなく、React の構成上の性質から生じるパターンです。

この場合、いくつかの共通の を使用して HOC を作成しますprops。これを実現するための 1 つのオプションは、ReCompose ライブラリとそのwithPropsメソッドを使用することです。次に例を示します。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { withProps } from "recompose";

import ReactTable from "react-table";

const CommonTable = withProps({
  className: '-striped -highlight mb-3',
  multisort: true,
  showPagination: false,
  resizable: false,
  etc: etc
})(ReactTable);

また、 docsで概説されているように、HOC で ReactTable を使用する場合に注意すべきいくつかの要因があるようです。

次に例を示します。

const { withProps } = Recompose;

const CommonTable = withProps({
  className: '-striped -highlight mb-3',
  multisort: true,
  showPagination: false,
  resizable: false
})(ReactTable.default);

const data = [
  {
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  }
];

const columns = [
  {
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }
];

ReactDOM.render(<CommonTable data={data} columns={columns} />, document.getElementById("app"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.26.0/Recompose.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>


<div id="app"></div>

于 2018-02-27T07:12:20.577 に答える