我操纵组件的状态，并使用状态中的对象（输入参数）来显示一些信息。
但是收到了以下警告，我检查了一下，没有在DOM元素上操作state或有名为
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>
)
}viewState的属性？这个警告是什么意思？
下面是我的组件的完整代码：警告：React不认识DOM元素上的
viewState属性。如果你想要它作为自定义属性出现在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函数赋值的，我使用tooltip状态来控制是否应该在页面中显示工具提示。
注：根据deck.gl文档，onHover将在以下情况下触发：
onHover（函数，可选）
当鼠标进入/离开此deck.gl图层的对象时，将调用此回调，并带有以下参数：
info
event-源事件
根据错误跟踪路径，在我的<span>元素中抛出错误，这就是我最初认为是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