React Table外包可用的道具

By simon at 2018-02-28 • 0人收藏 • 51人看过

我想从我的反应表中外包可用的道具。我有搜索 一些网站,但我没有找到任何关于此的案件。的背景 这种情况是,我想不止一次地使用这个表,我不想 初始化表格再一次。

<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}
/>
从这个代码我想外包以下道具:* className * multisort 显示分页可调整大小   *等 你有什么想法,我是如何外包的? 关心MCW

2 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

听起来就像你正在寻找[高阶组件 (HOC)](https://reactjs.org/docs/higher-order-components.html)\ - 一种技术NIQUE 在React中重用组件逻辑。 HOC不是React API的一部分,但是 而是从React出现的模式成分性质。 在这种情况下,您想使用一些常见的props创建一个HOC。一个 选择做到这一点就是我们[重新组织 库](https://github.com/acdlite/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);
此外,它看起来像使用时需要注意一些因素 ReactTable with HOC,概述在[docs](https:// react-table.js.org/#/story /组织-自述)。 这是一个例子:
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-28   #2

听起来就像你正在寻找[高阶组件 (HOC)](https://reactjs.org/docs/higher-order-components.html)\ - 一种技术NIQUE 在React中重用组件逻辑。 HOC不是React API的一部分,但是 而是从React出现的模式成分性质。 在这种情况下,您想使用一些常见的props创建一个HOC。一个 选择做到这一点就是我们[重新组织 库](https://github.com/acdlite/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);
此外,它看起来像使用时需要注意一些因素 ReactTable with HOC,概述在[docs](https:// react-table.js.org/#/story /组织-自述)。 这是一个例子:
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>

登录后方可回帖

Loading...