使用迷你图时警告控制台 - Reactjs

Question

面对有关迷你图道具的控制台警告..

警告：您正在为 SparklinesLine 上的 color 属性手动调用 React.PropTypes 验证函数。这已被弃用，不会在下一个主要版本中工作。由于第三方 PropTypes 库，您可能会看到此警告。

请查看代码

import React, {Component} from 'react';
    import {Sparklines, SparklinesLine, SparklinesBars} from 'react-sparklines';

export default (props) => {
  return(
      <Sparklines data={props.data}>
        <SparklinesLine color={props.color}/>
      </Sparklines>
  );
}

Answer 1

这与 PropTypes 从生产中删除有关。

他们有一个令人难以置信的 post 解释所有这一切 - https://facebook.github.io/react/warnings/dont-call-proptypes.html

这是总体思路 -

In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.

// Not supported!
var error = apiShape(json, 'response');

他们建议查看堆栈跟踪以了解调用 PropTypes api -

的确切位置

Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call.

post 还提供了修复误报的建议 -

If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that it passes to detect manual PropTypes calls.

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

您可以在函数中使用 ...rest 修复上述代码 - 见下文 -

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) { // Note ...rest here
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // and here
  };
}

所以这可能直接与 Sparklines 库一起使用，或者在您的代码中的某个地方。不能说没有完整的堆栈跟踪，但这应该会让您更接近解决问题。

使用迷你图时警告控制台 - Reactjs

Warning console while using Sparklines - Reactjs

reactjs

sparklines