使用迷你图时的警告控制台 - 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 有关。

他们有一篇令人难以置信的帖子解释了所有这些 - https://facebook.github.io/react/warnings/dont-call-proptypes.html

这是大体思路 -

在 React 的未来主要版本中，实现 PropType 验证功能的代码将在生产中剥离。一旦发生这种情况，任何手动调用这些函数的代码（在生产中没有被剥离）都会抛出一个错误。

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

他们建议查看堆栈跟踪以了解调用 PropTypes api 的确切位置 -

检查警告产生的堆栈跟踪。您将找到负责 PropTypes 直接调用的组件定义。

该帖子还提供了修复误报的建议 -

如果您是第三方 PropTypes 库的作者，并且您让消费者包装现有的 React PropTypes，他们可能会开始看到来自您的库的此警告。发生这种情况是因为 React 没有看到它传递来检测手动 PropTypes 调用的“秘密”最后一个参数。

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 库有关，或者在您的代码中的某个地方。不能说没有完整的堆栈跟踪，但这应该让您更接近解决问题。