Calcite 组件反应
此软件包为 Calcite 组件。参考 反应示例 用于使用此软件包的最小应用程序.
折旧通知
[尖叫声] Calcite Consult React自v 5.0起贬值.
这个 @esri/calcite-components-react 软件包最初是用React 18开发的,其中包装是使用自定义元素所必需的。 与 React 19 的自定义元素支持这些包装已经不再需要了.
考虑升级到19+反应并使用 @esri/calcite-components 直接说.
安装
pnpm add @esri/calcite-components-react
此软件包包括标准的相容版本 @esri/calcite-components 软件包,所以不需要单独安装.
选择构建
由标准组件包提供的有两栋建筑.
自定义元素构建
自定义元素 是在使用前端框架时被推荐的构建,例如React。 CDN 的资产默认使用,但您可以指定本地资产路径 setAssetPath下一步将解释使用当地资产的额外设置.
import { setAssetPath } from "@esri/calcite-components";
setAssetPath(window.location.href);
接下来,您需要从标准组件包自定义元素构建中导入您使用的每个组件. 这将自动定义窗口上的自定义元素 。 然后,从 @esri/calcite-components-react。 。 。 .
import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-icon";
import "@esri/calcite-components/dist/components/calcite-slider";
import { CalciteButton, CalciteIcon, CalciteSlider } from "@esri/calcite-components-react";
盘点构建
使用时 位点 构建, 您需要手动定义窗口上的自定义元素 :
import { defineCustomElements } from "@esri/calcite-components/dist/loader";
defineCustomElements();
由于您手动定义了窗口上的自定义元素, 您只需要从中导入单个组件 @esri/calcite-components-react。 。 。 .
import { CalciteButton, CalciteIcon, CalciteSlider } from "@esri/calcite-components-react";
复制资产
有些组成部分(虹、取日期者)依赖于在特定路径上的资产。 如果在当地使用资产,你需要把这些复制到你的公开文件夹. 比如说:
cp -r node_modules/@esri/calcite-components/dist/cdn/assets/* ./public/assets/
为什么不直接使用网络组件?
使用 React 19+ 对自定义元素的本地支持, 您现在可以使用 @esri/calcite-components 直接说 见 Calcite 组件重现折旧通知 用于补充信息.
React 18及更早的版本使用合成事件系统,其中由 Calcite 组件所排放的自定义事件不会在React中与JSX一起运行. 例如,如果使用标准网络组件来更新当更改发生时的值 <calcite-slider>,您需要保存元素的引用并添加一个收听器:
const sliderEl = useRef(null);
const [sliderValue, setSliderValue] = useState(50);
function onUpdate(event) {
setSliderValue(event.target.value);
}
// need to access the DOM node to set custom event listeners for props that aren't strings or numbers
// lit.dev/docs/frameworks/react#why-are-wrappers-needed
useEffect(
(_) => {
sliderEl.current.addEventListener("calciteSliderUpdate", onUpdate);
},
[sliderEl],
);
使用 @esri/calcite-components-react,这些事件与你有关:
const [sliderValue, setSliderValue] = useState(50);
<CalciteSlider onCalciteSliderUpdate={(e) => setSliderValue(e.target.value)} />;
如果使用TypeScript,也会为您的事件听众,道具等获得更高的类型安全.
捐款
我们欢迎为这一项目提供捐款。 见 捐款额 概述捐款准则.
许可证
骑警Esri - https://js.arcgis.com/ 5.0/LICENSE.txt (英语)
美国版权法和适用的国际法、条约和公约所保留的一切权利.
这些材料根据《埃斯里总许可证协定》获得使用许可,并受该协定条款的约束。 您可以不经修改而重新分配和使用此代码,但需遵守司法协助条款并包括此版权通知.
见使用限制 http://www.esri.com/legal/pdfs/mla e204 e300/english (英语)
关于补充资料,参见 卡尔西特的许可证 联系人:美国加利福尼亚州纽约街380号合同和法律服务部
电子邮件 : 合同@esri.com
第三方通知
见 第三次议会提名(md)。 。 。 .