React Bootstrap和React.PropTypes验证函数

Question

我有一个基于 Rails 5 的应用程序，安装了 browserify 和 react-rails。我可以使用 npm 来加载组件和安装包。但是当我加载一些外部包，比如 react-bootstrap 组件时，浏览器控制台会出现'Warning: You are manually calling a React.PropTypes validation function for the....'这样的警告信息，每个组件上的每个属性都会有。

我已经到处查找，但是不知道该如何解决这些警告。类似的问题也被问到过这里，但是没有适用于我的问题的答案。

以下是我的文件:

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.0.1",
    "fetch": "^1.1.0",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.4",
    "react-dom": "^15.3.2",
    "reactify": "^1.1.1",
    "sweetalert-react": "^0.4.4"
  }
}

application.js

//= require_self
//= require react-server
//= require react_ujs


window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom');
require( 'jquery-ujs' );
require( 'jquery-ui' );
require( 'bootstrap' );
require( 'react-bootstrap' );
require( 'fetch' );
require( './components' );

components.js

var app = window.app = global.app = {};

// Component::Manifest
var AdminDashboard = require( 'components/dashboards/admin' );

app.AdminDashboard = AdminDashboard

admin.js.jsx

var ButtonToolbar = require('react-bootstrap').ButtonToolbar;
var Button = require('react-bootstrap').Button;
var Admin = React.createClass({

  handleClick(){
    alert('This was clicked');
  },


  render: function() {

    return (
      <ButtonToolbar bsClass="btn-group">
        <Button active={true} bsStyle="primary" onClick={this.handleClick}>Primary</Button>
      </ButtonToolbar>
  );
  }
});

module.exports = Admin;

如果这个警告与外部包及其组件有关，我该如何摆脱它？

- HermannHH

---

我使用了React-Bootstrap但没有遇到这个错误。我使用Webpack与React-Bootstrap。 - vijayst

我尝试使用webpack，但我完全不熟悉js和npm等。因此，我不确定如何与rails集成。您是否知道有什么好的教程可以帮助指导我，@vijayst？ - HermannHH

这篇文章可能会有所帮助。http://vijayt.com/post/minimal-scaffolding-react-webpack/ - vijayst

这是我之前在使用webpack时遵循的教程：http://aergonaut.com/rails-4-gulp-webpack-react/。为了获得Rails视图助手，我还安装了react-rails gem。 - HermannHH

谢谢。我会尝试弄清楚这个如何适应Rails环境 @vijayst - HermannHH

Answer 1

这可能会有所帮助-https://facebook.github.io/react/warnings/dont-call-proptypes.html。基本上，您正在使用的库react-bootstrap可能正在以不受React支持的方式使用PropTypes。

- g2jose

Answer 2

升级react-bootstrap应该可以解决这个问题。看起来他们在六月份就已经解决了这个问题。

你可以将package.json改为"react-bootstrap": "^0.31.0"，看看是否有效。

- nAv