react keyview

React-Keyview

---

安装

---

通过NPM

 npm i react-keyview

通过纱线

 yarn add react-keyview

通过CDN（UNVKG）

 https://unpkg.com/react-keyview@latest

UMD库暴露为ReactKeyView

 const KV = ReactKV ;

笔记。该软件包不提供任何样式表资源，组件是高度可自定义的。它也支持服务器端渲染

演示

• 列表
• 桌子
• 网格

用法

您可以从“ React-Keyview”（例如。

 import { Grid , Table } from "react-keyview" ;

或者，您只能直接导入所需的组件。

 import Grid from "react-keyview/build/Grid" ;
import Table from "react-keyview/build/Table" ;

UMD模块具有前缀ReactKV，例如。

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

列表

---

 function renderRow ( rowIndex , currentIndex ) {
  return < div > { rowIndex } </ div > ;
}

< List renderRow = { this . renderRow } count = { YOUR_DATA . length } visibleCount = { 5 } rowHeight = { 50 } /> ;

支柱	类型	描述
Renderrow	功能	渲染一排
数数	数字	元素数量
Rowheight	数字	行高度
Visiblecount	数字	可见元素计数
dom	目的	将属性传递给HTML元素

桌子

---

 function renderHeader ( item ) {
  return item ;
}
function renderRowColumn ( i , j ) {
  var getRowColumn = DATA [ i ] [ header [ j ] ] ;
  return < td key = { UNIQUE_KEY } > { getRowColumn } </ td > ;
}

function renderRow ( rowIndex , currentIndex , col ) {
  return < tr key = { UNIQUE_KEY } > { col } </ tr > ;
}

< Table
  header = { header }
  renderHeader = { this . renderHeader }
  renderRow = { this . renderRow }
  columnCount = { 3 }
  count = { YOUR_DATA . length }
  visibleCount = { 5 }
  rowHeight = { 50 }
  renderRowColumn = { this . renderRowColumn }
/> ;

支柱	类型	描述
Visiblecount	数字	可见行数
数数	数字	行数
标题	大批	必须是一系列字符串
Renderheader	功能	可见列的数量
Renderrow	功能	渲染行
Renderrowcolumn	功能	渲染行的列
dom	目的	将属性传递给HTML元素

网格

---

 function renderer ( { rowIndex , columnIndex , yIndex , xIndex } ) {
  return (
    < td key = { UNIQUE_KEY } >
      Item { columnIndex } , { rowIndex }
    </ td >
  ) ;
}

< Grid
  renderer = { this . renderer }
  visibleRows = { 6 }
  rowCount = { 100 }
  rowWidth = { 30 }
  columnCount = { 100 }
  visibleColumns = { 6 }
  columnHeight = { 50 }
/> ;

支柱	类型	描述
圆柱	数字	列数
Visiblecolumns	数字	可见列的数量
Rowcount	数字	线数
Visiblerows	数字	可见行数
渲染器	功能	显示行和列
dom	目的	将属性传递给HTML元素