前言
在使用 react-data-grid 这一 React 表格控件时，出现了一些警告（warning）。这些警告虽然不会影响代码的运行，但是给开发者的调试带来了困扰。
本文将介绍一个 npm 包，叫做 react-data-grid-warning-fix，它可以解决 react-data-grid 的这些警告问题。下面我们将从安装、使用、原理等方面详细说明。
安装
- 使用 npm 安装
--- ------- --------------------------- ------
使用
在使用 react-data-grid 的代码中，将该包所导出的 ReactDataGrid 替换掉原先引用的 ReactDataGrid，即可达到解决警告的目的。
------ ----- ---- --------
------ - ------------- - ---- ------------------
------ - ----------------------- - ---- ------------------------------
----- ------- - -
-
---- -----
----- -----
------ ---
--
-
---- --------
----- --------
------ ----
--
--
----- ---- - -
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
--
----- ------ - -- -- -
--------------
-----------------
-------------- -- --------
-----------------------
---------------
--
--
------ ------- -- -- -
-------------------------
------- --
--------------------------
--原理
React 16 开始，在 库 和 应用 中使用 PropTypes 时会有 warning，它警告说 forwarding 值给 PropTypes 会影响性能。
而 react-data-grid 依赖 React 15.6.2，会使用到 React.PropTypes。react-data-grid-warning-fix 的主要作用就是将 React.PropTypes 改成prop-types，从而避免给使用者带来 warning 问题。
附带示例
index.js
------ ----- ---- --------
------ - ------ - ---- ------------
------ ------ ---- -----------
----- --- - -- -- -
------ -
-----
------- --
------
--
--
----------- --- ---------------------------------MyGrid.js
------ ----- ---- --------
------ - ------------- - ---- ------------------
------ - ----------------------- - ---- ------------------------------
----- ------- - -
-
---- -----
----- -----
------ ---
--
-
---- --------
----- --------
------ ----
--
--
----- ---- - -
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
- --- -- ------ ------ -- --
--
----- ------ - -- -- -
--------------
-----------------
-------------- -- --------
-----------------------
---------------
--
--
------ ------- -- -- -
-------------------------
------- --
--------------------------
--总结
在 React 应用中使用第三方组件库时，经常会遇到不兼容的情况。react-data-grid-warning-fix 这个小工具能够解决 react-data-grid 在 React 16 中的一个 PropTypes 的警告问题，保证了代码的规范性和性能。
在实际项目中，我们也可以使用类似的工具进行处理，提升代码效率和开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d1781e8991b448e6e41