简介
在 React 中，组件通常会定义一些 props 来接收其他组件传递过来的数据。但是，如果我们希望某些 props 可以有条件的存在，即如果满足某些条件就必须存在，否则可以不传递，该怎么办呢？
原则上我们可以使用 if/else 语句来判断，但是如果 props 比较复杂，判断语句会变得十分冗长，可读性也不好。这时候，我们可以使用一个 npm 包，叫做 react-proptype-conditional-require 来解决问题。
安装
在使用 react-proptype-conditional-require 前，我们需要对其进行安装。在命令行界面输入以下命令即可：
--- ------- ------ ----------------------------------
示例
接下来，我们来编写一个简单的 React 应用，使用 react-proptype-conditional-require 实现条件 props。
首先，我们需要先引入该包：
------ -------------------- ---- ------------------------------------
然后，我们定义一个组件 Button，该组件有一个 onClick 的回调函数，但是当 isDisabled 为 true 时，onClick 不应该被传递进去。代码如下：
------ -------------------- ---- ------------------------------------
-------- ------------- -
----- - ----- ----------- ------- - - -----
------ -
------- --------------------- --------------------------------------------- -------- -------------
------
---------
-
-
---------------- - -
----- ----------------------------
----------- --------------------------
-------- ---------------------
------- --------- -------------- -- ----------------- -- -----------------
-------------------------
--
-代码中，我们先将 onClick 从 props 里面解构出来，然后在 Button 组件内部使用 ConditionalPropTypes(PropTypes.func, onClick, isDisabled) 来进行条件判断。如果 isDisabled 为 true，则 onClick 会被忽略，不会被调用。
在 Button.propTypes 里面，我们使用了 PropTypesConditional，并传入了两个参数：一个判断函数和一个类型。
判断函数的作用是，当 isDisabled 为 true 时，不需要检验 onClick 是否存在，因为此时该值不应该被传递。类型参数则用来检查 onClick 是否符合规则。
指导意义
通过使用 react-proptype-conditional-require，我们可以很方便的实现有条件的 props。这不仅可以提高代码可读性，还能够减少代码量，提高代码效率。建议在开发 React 应用时尝试使用该包，提升开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f115e06403f2923b035c268