使用Sparkline时的警告控制台- Reactjs

Question

面对一个关于Sparkline道具的控制台警告。

警告:您正在手动为React.PropTypes上的color支柱调用一个SparklinesLine验证函数。这是不可取的，并将不能在下一个主要版本。由于第三方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，那么他们可能会看到这个警告来自您的库。之所以会发生这种情况，是因为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库，或者在您的代码中。不能说没有完整的堆栈跟踪，但这将使您更接近解决问题。