@ramonak/react-excel React组件上传、编辑excel表格数据并将其转换为对象数组 演示 安装 npm install --save @ramonak/react-excel 用法 import { ReactExcel , readFile , generateObjects } from '@ramonak/react-excel' ; const App = ( ) => { const [ initialData , setInitialData ] = useState ( undefined ) ; const [ currentSheet , setCurrentSheet ] = useState ( { } ) ; const handleUpload = ( event ) => { const file = event .

条纹核心 版权所有 (C) 2016-2019 开放图书馆基金会 该软件是根据 Apache 许可证 2.0 版的条款分发的。 有关详细信息，请参阅文件“”。 介绍 Stripes 是一个工具包，用于构建可以运行 FOLIO UI 模块的单页 Web 应用程序。 UI 模块由组件组成，其中一些将连接到提供的后端服务。 每个模块都有一个“类型”，表示它在应用程序中的功能。 目前，唯一的“类型”是“app”，它提供了一个顶级组件来渲染到一个大的内容区域。 文档路线图 文档路线图已移动。 有关设置开发环境的一般 Stripes 信息、指南和帮助，请参阅 Github 存储库。 Stripes-core 文档 了一个使用 Stripes Connect 连接到后端服务的组件的简单示例。 通过示例展示了件——有些是连接的，有些不是——如何协同工作以实现应用程序的一部分。 请注意，这有点过时，但仍然

茉莉花React 将 jasmine Suite 变成适合测试 React 组件的套件。 例子： var Checkbox = require ( 'jsx!components/checkbox' ) ; describe ( 'Components.Checkbox' , function ( ) { this . reactSuite ( { type : Checkbox } ) ; it ( 'should render' , function ( ) { expect ( subject . isMounted ( ) ) . toBeTruthy ( ) ; } ) ; } ) ; 特征 您的套件将可以使用以下功能： 自动组件（卸载）安装 在您的全局套件上下文中，“主题”将包含对您正在测试、在套件中的每个测试期间创建和安装的组件的

React某些组件 我早期的 React 步骤： 从package.json安装依赖项： npm install 更新PATH以包含 npm bin 目录： PATH="$(npm bin):$PATH" 捆绑和预处理 JSX： webpack --watch 服务内容： python -m SimpleHTTPServer 访问http://127.0.0.1:8000 点击“做某事”

React谷歌地图 React组件使用标记渲染Google Map。 您可以使用所有正式的Google Maps API功能。 安装 npm install --save react-google-map 如果您没有加载googleMaps的解决方案，则可以使用以下软件包： npm install --save react-google-maps-loader 变更日志 查看 演示版 用法 . map { height : 300 px ; } @media screen and ( min-width : 1024 px ){ . map { height : 500 px ; } } import React , { PropTypes } from "react" import GoogleMap from "react-google-map" import GoogleMapLoader from "react-google-maps-loader" import iconMarker from "./assets/iconMarke

React组件 一组可重用的 React 组件 用 React JS 编写的可重用组件。

rlayers - OpenLayers 6+ 的 React 组件 rlayers 是 OpenLayers 的一组自以为是的 React 组件。 它的设计策略是：Fully Typescript-typed 以 React 方式而不是 OpenLayers 方式执行面向用户的所有操作 - onClick 和 onPointerEnter/onPoinerLeave 处理程序是典型示例 如果它不面向用户，则不需要采用 React 方式 -在内部它使用继承，遵循 OpenLayers 类，而不是组合 简单的事情应该很容易做，除非需要，否则性能优化不应该妨碍如果在更新组件时采取快捷方式，总是出于安全考虑而犯错，但要提供覆盖方法允许接近原始 OpenLayers 性能 暴露所有高级 OpenLayers 功能 尽量对 SSR 友好（此功能目前处于 POC 阶段，见下文） 当前目标是 OpenLayers 6+ 构建时避免依赖，除了对于 React 和 OpenLayers（示例有一些依赖关系）-目前唯一的是 8Kbytes 的 lru-cache 它与停止的 react-openlayer

在 React 中挣扎于模态、灯箱或加载栏？ React-portal 创建一个新的顶级 React 树并将其子节点注入其中。 这对于正确的样式（尤其是定位）是必要的。 正在寻找 v3 文档？ 到这里。 功能使用 React v16，其用于创建门户的官方 API 有一个后备，React v15 将其子项传输到一个新的 React Portal，该门户默认附加到 document.body 可以针对用户指定的 DOM 元素支持服务器端渲染支持返回数组（无需要包装 div） 和 所以在灵活性和便利性之间没有妥协不会产生任何 DOM 混乱提供关闭 ESC 和关闭外部鼠标点击开箱即用无依赖，简约安装纱线添加ReactReact-domReact-门户使用门户导入{门户}来自“React门户”； 此文本在 document.body 的末尾传送！ 这篇文章被传送到旧金山！ 就是这样！ 您要切换门户吗？ 这是一个简单的 React 组件，所以你可以简单地做：{isOpen && 有时传送门？ 这为您提供了绝对的灵活性和控制力，我建​​议您将其用作组件的基本构建块作为模式或通知。 此代码也适用于服务

:straight_ruler: 一个可调整大小的 React 组件。 目录截图 Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSize(size: { width: number | string, height: number | string }): void 测试相关截图 Live Demo Storybook Storybook CodeSandbox CodeSandbox CodeSandbox(TypeScript) CodeSandbox(With hooks ) 使用 defaultSize 安装 $ npm install --save re-resizable 使用示例 默认大小的样本 尺寸示例 如果您使用尺寸道具，请自行管理状态。 { this.setState({ width: this.state.width + d.width, height: this.state.height + d.height, }); }} > 样本大小 Props defaultS

React DemoTab :bookmark_tabs: 一个 React 组件，可以轻松创建其他组件的演示 安装 npm install react-demo-tab Demo DemoTab 示例 Example import React from 'react'; 从 'react-dom' 导入 ReactDOM； 从'react-demo-tab'导入DemoTab； 从“./ButtonGreen”导入演示组件； const demoCode = ` import React from 'react'; 导入'./ButtonGreen.css'; const ButtonGreen = () =>绿色按钮； 导出默认ButtonGreen;`; const demoStyle = ` .btn-green { 背景颜色：绿色； 字体大小：14px； 填充：12px 26px； 边框半径：6px； }`; const App = () => { 返回 ( ); }; ReactDOM.render( , document.getElementById('root'));