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元素