升级到 React 15.5.0 之后遇到的问题。

2017-04-17 Oliver Wang 更多博文 » 博客 » GitHub »

react jscodeshift proptypes react-codemod

原文链接 http://ochukai.me/react-15-5-0/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

propTypes 被从 react 包里面分离出来了，如果要用到 propTypes, 则必须要自己安装 prop-types

npm install prop-types --save

那么，对于之前项目里面已经存在的 propTypes 呢，可以使用 facebook 的这个工具 jscodeshift¹ 和 codemod², 其中 codemod 最好 clone 在当前项目文件夹。

用法像这样：

jscodeshift 
  --extensions=js,jsx 
  -t ./react-codemod/transforms/React-PropTypes-to-prop-types.js 
  src

Processing 310 files...
Spawning 3 workers...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 50 files to free worker...
Sending 10 files to free worker...
All done.
Results:
  0   errors
  0   unmodified
  310 skipped
  0   ok
Time elapsed: 4.758seconds

执行完之后，代码会变成这样：

{% codeblock lang:js mark:1,9-15 %} import PropTypes from 'prop-types'; import React from 'react';

import { Form, Card, Modal, Spin } from 'antd';

// ...

UserAnswerModal.propTypes = { item: PropTypes.object, visible: PropTypes.bool, loading: PropTypes.bool, type: PropTypes.string, form: PropTypes.object, onOk: PropTypes.func, onCancel: PropTypes.func, }; {% endcodeblock %}

于是问题就解决了，但是因为你引用的包可能会有这个问题，所以 warning 应该不会消失。