React相关插件

React相关插件

1、瀑布流插件

官方地址 、 gitee上面的地址

 npm install autoresponsive-react --save-dev

例子：

import React, { Component } from 'react';
import AutoResponsive from "autoresponsive-react"
class App extends Component {

  state = {
    data: [
      1, 2, 3, 4, 5, 6, 7, 8, 9
    ]
  }
  getResponsiveProps() {
    return {
      itemMargin: 10,
      containerWidth: this.state.containerWidth || document.body.clientWidth,
      itemClassName: 'item',
      gridWidth: 100,
      transitionDuration: '.5'
    }
  }
  render() {
    return (
      <div>
        <AutoResponsive ref="container" {...this.getResponsiveProps()}>
          {
            this.state.data.map((v, i) => {
              let style = {
                width: i % 2 == 0 ? 190 : 390,
                height: i % 2 == 0 ? 200 : 400,
                backgroundColor: "purple"
              }
              return <div key={v} style={style}>
                {v}
              </div>
            })
          }
        </AutoResponsive>
      </div>
    );
  }
}

export default App;

2、长列表懒加载插件

文档使用说明：
List
AutoSizer

npm install react-virtualized --save

例子：

import React, { Component } from "react";
/* 1.引入 List组件 */
import { List, AutoSizer } from "react-virtualized";
class App extends Component {
  state = {
    list: [11, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 4, 2, 3]
  };
  rowRenderer = ({
    key, // Unique key within array of rows 行数组中的唯一键
    index, // Index of row within collection 集合中行的索引
    isScrolling, // The List is currently being scrolled 当前正在滚动列表
    isVisible, // This row is visible within the List (eg it is not an overscanned row) 这一行在列表中可见（如它不是一个过多的行）
    style, // Style object to be applied to row (to position it) 要应用于行的样式对象（用于定位它）
  }) => {
    return (
      <div key={key} style={style}>
        {this.state.list[index]}
      </div>
    );
  };
  render() {
    return (
      <div style={{ "height": "100vh" }}>
        <AutoSizer>
          {({ height, width }) => {
            return (
              <List
                width={width}
                height={height}
                rowCount={this.state.list.length}
                rowHeight={20}
                rowRenderer={this.rowRenderer}
              ></List>
            );
          }}
        </AutoSizer>
      </div>
    );
  }
}

export default App;

3、React + echarts图表

 npm install --save echarts

import echarts from "echarts";
import "echarts/map/js/china"
import "echarts/theme/shine"

let $rankChart = document.getElementById("rankChart");
const rankChart = echarts.init($rankChart, "shine");

4、ant-design-mobile UI组件库(移动端)

（PC端）

yarn add  antd-mobile