Question

我操纵组件的状态，并使用处于状态的对象（输入参数）来显示一些信息。

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无法识别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状态来控制是否在页面中显示工具提示。

PS：根据deck.gl的文档，onHover将在以下位置触发：

onHover（功能，可选）

当鼠标使用以下参数进入/离开这个deck.gl层的对象时，将调用此回调：



信息



事件-源事件

根据错误跟踪路径，它在我的<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

Answer 1

该警告似乎来自deck.gl，请尝试修改Map组件：

const Map = (props) => {
  const {
    controller = true,
    baseMap = true,
    initialViewState = INITIAL_VIEW_STATE,
    layerType = '3d-heatmap',
    renderTooltip = DEFAULT_RENDER_TOOLTIP,
    ...rest //rest props
  } = props;
//...

Answer 2

我今天遇到了同样的问题，并通过不将工具提示添加为deckGL的直接子代来解决了该问题：

return (
  <React.Fragment>
    <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}
        />
      )}
    </DeckGL>
    {object && renderTooltip(tooltip)}
 </React.Fragment>
  );

Answer 3

因此，我遇到了同样的问题。这是一个微妙的提示，但似乎您不应该将渲染的工具提示作为DeckGL的子代来传递，而是作为一种在调用时会呈现工具提示的函数。因此，就您而言，您可以这样做：

  return (
    <DeckGL
      ...
    >
      ...
      {object && renderTooltip.bind(this, tooltip)}
    </DeckGL>
  );

对bind的调用使您可以在不实际调用基础函数的情况下咖喱您想传递的参数。 DeckGL传递的所有道具都将作为tooltip之后的下一个参数传递。

也有其他方法可以解决此问题，但是关键是传递一个将不渲染组件的函数。

警告：React无法识别DOM元素上的`viewState`属性

3 个答案: