React Table 外包可用道具
React Table outsourcing available props
我想从我的反应 table 中外包可用的道具。
我搜索了一些网站,但我没有找到任何关于这个案例的信息。
这个案例的背景是,我想多次使用这个table,我不想一次又一次地初始化table。
<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}
/>
从这段代码我想外包以下道具:
- 类名
- 多排序
- 显示分页
- 可调整大小
- 等等
你知道我如何外包吗?
问候 MCW
听起来您正在寻找 Higher Order Components (HOCs) - React 中用于重用组件逻辑的技术。 HOC 不是 React API 的一部分,而是从 React 的组合性质中出现的一种模式。
在这种情况下,您想使用一些常见的 props
创建一个 HOC。实现此目的的一种选择是使用 ReCompose library 及其 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.
中概述了将 ReactTable 与 HOC 一起使用时似乎有一些需要注意的因素
这是一个例子:
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>
我想从我的反应 table 中外包可用的道具。 我搜索了一些网站,但我没有找到任何关于这个案例的信息。 这个案例的背景是,我想多次使用这个table,我不想一次又一次地初始化table。
<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}
/>
从这段代码我想外包以下道具:
- 类名
- 多排序
- 显示分页
- 可调整大小
- 等等
你知道我如何外包吗?
问候 MCW
听起来您正在寻找 Higher Order Components (HOCs) - React 中用于重用组件逻辑的技术。 HOC 不是 React API 的一部分,而是从 React 的组合性质中出现的一种模式。
在这种情况下,您想使用一些常见的 props
创建一个 HOC。实现此目的的一种选择是使用 ReCompose library 及其 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.
中概述了将 ReactTable 与 HOC 一起使用时似乎有一些需要注意的因素这是一个例子:
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>