反应-叶片-组件-标记器
👉 德莫尔
QQ 使用反应组件为 反射叶片 标记.
熟悉的互换 API 感觉像 React Leaflet.
QQ 可以使用状态,上下文等. 具足分相. 没有BS.
- 输入的很强.
这是什么
一个小小的包装 反应-叶片是因为 <Marker /> 组件允许您使用 React 组件作为标记,其中 工作状态、处理者和获取父环境。 。 。 .
本图书馆采用的方法不同于其他使用方法 renderToString 在它使用 React 的 门户 实现效果的功能。 这意味着组件不是静态的,而是一个完整的一等组件,可以有自己的状态,事件处理器和生命周期.
我努力寻找一些能起作用的东西, 使我能够从一个设计系统中掉入一些东西, 并且能够提供所有可以起作用的背景, 以及所有可以起作用的互动.
许多现有的软件包存在,但它们使用的技术意味着它们非常有限.
安装
使用您的工程包管理器安装 .
国家预防机制
npm install --save @adamscybot/react-leaflet-component-marker
雅伦
yarn install --save @adamscybot/react-leaflet-component-marker
菲律宾
pnpm add @adamscybot/react-leaflet-component-marker
文档
简单使用
而不是导入 Marker 从 react-leaflet导入 Marker 从 @adamscybot/react-leaflet-component-marker。 。 。 .
这个 icon 道具的延伸允许您选择JSX元素. 所有其他道具都与 react-leaflet 标记 API,但有一个额外的道具叫 componentIconOpts 页:1 高级使用。 。 。 .
这个 icon prop还可以接受所有原始类型的图标,作为基础 react-leaflet 马克接受。 虽然使用这个图书馆对这个案子没有好处,但如果你想用这个图书馆来代替马克这个通用的,可能会有所帮助.
示例
import React from 'react'
import { MapContainer, TileLayer } from 'react-leaflet'
import { Marker } from '@adamscybot/react-leaflet-component-marker'
import 'leaflet/dist/leaflet.css'
const MarkerIconExample = () => {
return (
<>
<button onClick={() => console.log('button 1 clicked')}>Button 1</button>
<button onClick={() => console.log('button 2 clicked')}>Button 2</button>
</>
)
}
const CENTER = [51.505, -0.091]
const ZOOM = 13
const App = () => {
return (
<MapContainer center={CENTER} zoom={ZOOM}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={CENTER} icon={<MarkerIconExample />} />
</MapContainer>
)
}
高级使用
这个 componentIconOpts 道克可以被传递,这是一个具有更多选项的对象,用于更高级的使用案例. 注意,如果您未将组件传递给 icon,这些设置将被忽略.
以下列出此对象可以提供的属性.
layoutMode
这个 layoutMode 控制 React 组件标记的边框的表现。 它接受两种选择:
fit-content(默认)。在此模式下,React组件本身定义了标记的尺寸。 组件可以随意收缩并扩展. 从内部逻辑到这个库将坐标上的组件中心起来,以匹配Leaflets默认定位;然而,Leaflet本身实际上已经无法控制这一点了.fit-parent。在此模式下,React 组件标记的尺寸由iconSize转至componentIconOpts.rootDivOpts因此,Leaflet控制了维度和定位。 组件标记应当使用100%宽度和高度的元素来填补可用的大小.
rootDivOpts
[注] 一些选项不支持,因为它们在反应组件标记的情况下没有应用或没有意义. 不支持的选项是
html, (中文(简体) ),bgPos, (中文(简体) ),shadowUrl, (中文(简体) ),shadowSize, (中文(简体) ),shadowAnchor, (中文(简体) ),shadowRetinaUrl, (中文(简体) ),iconUrl财务报告和审定财务报表iconRetinaUrl。 。 。 .
包含来自支持的下方叶片子集属性的对象 divIcon 选项,此库用作包含的包装.
如果使用 fit-parent,您必须设置 iconSize 在这里.
disableScrollPropagation
false 默认.
如果设置为 true,将无法“通过”组件标记.
disableClickPropagation
false 默认.
如果设置为 true,单击组件标记将不会被下图所捕获.
unusedOptsWarning
true 默认.
可以设定为 false 以防在控制台警告 componentIconOpts 已经设定,但 icon 不是反应组件.
unusedOptsWarning
true 默认.
可以设定为 false 以免在控制台警告 layoutMode 曾经 fit-parent 但他们没有 iconSize 定义 rootDivOpts。 。 。 .