Javascript 反应道具-如果另一道具为空/空，则需要在道具上设置

我有一个组件

如果组件没有

this.props.children

，我想将prop

ariabel

设置为

isRequired

，否则in可以是可选的。我该怎么做

ariaLabel

不需要道具：

<Button>Add to bag</Button>

<Button ariaLabel="Add to bag" icon={ favorite } />

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

---

如果

this.props.children

和

this.props.ariaLabel

为空，则会抛出一个错误，说明

this.props.ariaLabel

是

需要的

<Button icon={ favorite } />

谢谢
这可能正是您所需要的：

在您的情况下，您的道具类型将是：

import requiredIf from 'react-required-if';

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: requiredIf(React.PropTypes.string, props => !props.children), /*isRequired if children is empty */
};

您不需要另一个库，“道具类型”提供了这种开箱即用的功能。
看

例如：

import PropTypes from 'prop-types';

//.......    

ExampleComponent.propTypes = {
    showDelete: PropTypes.bool,
    handleDelete: function(props, propName, componentName) {
        if ((props['showDelete'] == true && (props[propName] == undefined || typeof(props[propName]) != 'function'))) {
            return new Error('Please provide a handleDelete function!');
        }
    },

}

要添加到上面@chickenchilli的答案中，您可以将其抽象为一个更方便的助手函数，如下所示：

conditionalPropType.js
MyComponent.js
我认为这些解决方案有点过火，部分原因是问题要求这样做

我认为，在这种情况下，您不应该使代码复杂化，您应该以保持代码干净为目标。您可以在
渲染
上执行此操作，而不是在
propsTypes

...
render(){
  if(!this.children || !this.ariaLabel) { 
     throw "You need children or ariaLabel"; 
     return;
  }
  //rest of the code.
}

...

使用
isRequiredIf
。
4年前的一个例子是将
isRequiredIf
添加到PropTypes库中。不幸的是，即使在那个时候，他们也将PropTypes库置于维护模式，并且不会将其合并到中

仍然使用PropTypes，因此我们分叉了PropTypes库的
master
分支，并在中添加了此功能

现在你可以这样做：

arialable:PropTypes.string.isRequiredIf（props=>props.children）

超级干净和最小

通过使用以下内容更新您的
package.json
，您可以在自己的项目中自由使用：

"prop-types": "github:cntral/prop-types#isRequiredIf"

注意：它不接受布尔参数，只接受一个传递给props并需要返回布尔值的函数。
您需要在propTypes对象中执行类似操作。这就是我想要的。我不想要另一个依赖项。考虑到
prop-types
确实可以做到这一点，这显然是最好的答案。有没有一种好方法可以使用其中的propTypes表单？我想到的是
节点
或
形状（…）
，其中的测试编写起来相当复杂。这正是库执行时所需的反应。这只是一个包含十几行代码的文件，它提供了一个更好的接口，因此您不需要在自己的代码中编写这种难看的东西。如果您不想在package.json中添加另一行，我建议您复制该函数并将其放在助手文件中。太详细了，我认为prop-types包本身应该包含这样的内容。为什么在这里使用第三方呢！如果你关心你的项目的长期发展，你不需要在你的包中有另一个未经测试的依赖项。这个第三方代码非常棒，我只是提取了代码来创建我自己的自定义函数，以避免添加依赖项。这个第三方库实际上有18行长，很容易理解。用这个没什么错。如果您不喜欢使用依赖项，只需花15分钟的时间将其提取到您自己的助手或其他内容中。更好的是，如果你不喜欢使用“未经测试”的依赖关系，创建一个回购分支，添加一些测试，然后提交一份PR。让世界比你到达时更好一点。
...
render(){
  if(!this.children || !this.ariaLabel) { 
     throw "You need children or ariaLabel"; 
     return;
  }
  //rest of the code.
}

...

"prop-types": "github:cntral/prop-types#isRequiredIf"