Я манипулирую состоянием компонента и использую объекты в состоянии (входные параметры) для отображения некоторой информации.
const renderTooltip = ({ object: hoveredObject, x: pointerX, y: pointerY }) => {
// console.log(hoveredObject);
const {points} = hoveredObject;
const calLoadTime = () => {
const rawTime = points.reduce(
(accumulator, currentValue) =>
currentValue ? accumulator + currentValue.SPACES : accumulator,
0
) / points.length;
return rawTime.toFixed(1);
}
return (
<span
style={{
lineHeight: '20px',
borderRadius: '3px',
width: '200px',
left: pointerX+10,
top: pointerY+5,
}}
>
{`Length: ${points.length}\n`}
</span>
)
}
Но, получив следующее предупреждение, я проверил, не манипулировал состоянием элемента DOM или у меня есть какое-либо свойство с именем viewState?Что означает предупреждение?
Предупреждение: React не распознает пропелу viewState на элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM как пользовательский атрибут, вместо этого пишите его строчными буквами viewstate.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.
Полный код моего компонента показан ниже:
import React, { memo, useEffect, useRef, useState } from 'react';
import DeckGL, {HexagonLayer} from 'deck.gl';
import { StaticMap } from 'react-map-gl';
import { INITIAL_VIEW_STATE, LAYER_CONFIGS } from './configs';
import { addMapControl } from './tools';
import { MAPBOX_TOKEN } from './constants';
import styles from './index.less';
const Map = (props) => {
const {
controller = true,
baseMap = true,
initialViewState = INITIAL_VIEW_STATE,
layerType = '3d-heatmap',
renderTooltip = DEFAULT_RENDER_TOOLTIP,
} = props;
const [tooltip, setTooltip] = useState({
object: null,
// eslint-disable-next-line react/no-unused-state
x: 0,
// eslint-disable-next-line react/no-unused-state
y: 0,
})
/**
* layers render function
*/
const renderLayers = () => {
const {
data,
accData = [],
accSpeed = 0.1,
accRadiusScale = 4,
accRadiusMaxPixels = 200,
accColorRange,
coverage = 1,
radius,
elevationScale,
...otherProps
} = props;
const layers = [];
layers.push(
new HexagonLayer({
...LAYER_CONFIGS.AugmentHexagonLayer,
...otherProps,
coverage,
data,
radius,
onHover: setTooltip,
}),
);
return layers;
}
/**
* add Control for language switching
* @param {*} event
*/
const addControlHandler = (event) => {
const map = event && event.target;
if (map) {
addMapControl(map);
}
};
const { object } = tooltip || {};
return (
<DeckGL
width="100%"
height="100%"
layers={renderLayers()} // eslint-disable-line
initialViewState={initialViewState}
controller={controller}
>
{baseMap && (
<StaticMap
onLoad={addControlHandler}
reuseMaps
mapStyle="mapbox://styles/mapbox/dark-v9"
preventStyleDiffing
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
)}
{object && renderTooltip(tooltip)}
</DeckGL>
);
}
Я использовал какой-то сторонний пакет для отображения подсказок на картах.
Реквизиты renderTooltip назначаются входной renderTooltip функцией Iупомянуто выше, и я использую состояние tooltip, чтобы контролировать, должен ли я отображать всплывающую подсказку на моей странице.
PS: согласно документам deck.gl, onHover будет запущен в:
onHover (Функция, необязательно)
Этот обратный вызов будет вызываться, когда мышь входит / покидает объект этого слоя deck.gl со следующими параметрами:
В соответствии с путем трассировки ошибок, оно выдает ошибку в моем *Элемент 1050 *, поэтому я думаю, что это проблема renderTooltip.
Warning: React does not recognize the `viewState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `viewstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in span (created by Map)
in div (created by DeckGL)
in div (created by DeckGL)
in DeckGL (created by Map)
in Map (created by SpatialTemporal)
in section (created by SpatialTemporal)
in SpatioMap
in section
in Unknown (created by LBS)
in div
in div
in Unknown (created by LBS)
in LBS (created by Connect(LBS))
in Connect(LBS) (created by DynamicComponent)
in DynamicComponent (created by Route)
in Route (created by BasicLayout)
in Switch (created by BasicLayout)
in div (created by BasicLayout)
in div (created by Basic)
in Basic (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by ContainerQuery)
in ContainerQuery (created by BasicLayout)
in DocumentTitle (created by SideEffect(DocumentTitle))
in SideEffect(DocumentTitle) (created by BasicLayout)
in BasicLayout (created by Connect(BasicLayout))
in Connect(BasicLayout) (created by DynamicComponent)
in DynamicComponent (created by Route)
in Route (created by DvaRoot)
in Switch (created by DvaRoot)
in Router (created by DvaRoot)
in LocaleProvider (created by DvaRoot)
in Provider (created by DvaRoot)
in DvaRoot