React.js蓝图溢出列表组件Props

React.js蓝图 是一个前端UI工具包。它非常优化和流行，适用于构建复杂数据密集型的桌面应用程序界面。

React.js蓝图可折叠列表组件用于显示一定数量的项，并将其余的项包裹在无法显示的下拉列表中。在组件调整大小时会重新计算可见项。它提供了更好的用户界面。

React.js蓝图属性：

className: 它是一组用空格分隔的类名，用于传递给子元素。
collapseFrom: 它表示项应该折叠的方向。
alwaysRenderOverflow: 它是一个布尔值。表示是否始终调用overflowRenderer。
items: 要显示的项的列表。
minVisibleItems: 它表示要显示的最小项数。
observeParents: 它是一个布尔值。表示是否观察容器的父DOM元素。
onOverflow: 当溢出的项发生变化时调用的空回调函数。
overflowRenderer: 要调用以渲染溢出的项的回调函数。
style: CSS属性。
tagName: HTML标签名。
visibleItemRenderer: 用于渲染每个可见项的回调函数。

语法：

<OverflowList> ... </OverflowList >

准备工作： 介绍和安装 reactJS 。

创建React应用程序和模块安装：

步骤1： 创建React项目文件夹，打开终端，写入命令npm create-react-app文件夹名称，如果您已经全局安装create-react-app。如果没有安装，使用以下命令全局安装create-react-app npm -g create-react-app 或者通过以下命令在本地安装 npm i create-react-app 。

npm create-react-app project

步骤2： 创建您的项目文件夹（例如 project）后，通过使用以下命令进入该文件夹。

cd project

步骤3： 现在通过以下命令安装依赖项：

npm install @blueprintjs/core

项目结构： 看起来会像这样。

React.js蓝图溢出列表组件Props

示例1：

我们正在从“@blueprintjs/core”导入Breadcrumbs作为OverflowList。为了应用组件的默认样式，我们导入“@blueprintjs/core/lib/css/blueprint.css”。

我们正在创建一个名为data的数组，其中包含一些示例数据。我们添加OverflowList组件，并将数据数组传递给items属性。

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Breadcrumbs as OverflowList } from "@blueprintjs/core"; 
  
function App() { 
  
    const data = [ 
        { text: "Login" }, 
        { text: "User" }, 
        { text: "Articles" }, 
        { text: "Jobs" }, 
        { text: "contest" }, 
        { text: "Algorithms" }, 
        { text: "LogOut" }, 
    ]; 
  
    return ( 
        <div style={{ 
            margin: 30 
        }}> 
            <h3> 
                ReactJS Blueprint OverflowList Component Props 
            </h3> 
            <OverflowList 
                items={data} 
            /> 
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序。

npm start

输出：

React.js蓝图溢出列表组件Props

示例2： 我们正在从“@blueprintjs/core”中导入Boundary、Breadcrumbs as OverflowList和Classes。为了应用组件的默认样式，我们导入了“@blueprintjs/core/lib/css/blueprint.css”。

对于OverflowList组件，我们还添加了className、tagName和collapseFrom属性。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Boundary, Breadcrumbs as OverflowList, Classes } from "@blueprintjs/core"; 
  
function App() { 
  
    const data = [ 
        { text: "Login" }, 
        { text: "User" }, 
        { text: "Articles" }, 
        { text: "Jobs" }, 
        { text: "contest" }, 
        { text: "Algorithms" }, 
        { text: "LogOut" }, 
    ]; 
  
    return ( 
        <div style={{ 
            margin: 30 
        }}> 
            <h3>ReactJS Blueprint OverflowList Component Props</h3> 
            <OverflowList 
                items={data} 
                className={Classes.ELEVATION_4} 
                tagName="span"
                collapseFrom={Boundary.END} 
            /> 
        </div > 
    ); 
} 
  
export default App;