为React组件编写API，第1部分：不要创建冲突的道具
编写用于React组件的API，第2部分：为行为命名，而非交互
为React组件编写API，第3部分：道具的顺序很重要
编写用于React组件的API，第4部分：当心提示！
编写用于React组件的API，第5部分：使用组合
我们为React组件编写API，第6部分：在组件之间创建通信
这篇文章是@Sid 编写的Writing good component API系列文章中第一篇文章的翻译。 在任何难以理解的情况下进行翻译时，我都会以React JS文档的官方翻译为俄语为指导
对于React组件，您的道具就是您的API。
一个好的API应该是可以理解的，以便开发人员自己可以弄清楚如何使用它。 这不仅适用于组件库的开发，还适用于应用程序的开发。 重要的是，您和您的团队应该习惯使用组件及其API。
该系列文章的灵感来自塞巴斯蒂安·马克伯格 （ SebastianMarkbåge） ， 布伦特·杰克逊 （ Brent Jackson） ， 珍妮·克雷顿 （ Jenn Creighton）和A.杰西·杰鲁·戴维斯（A. Jesse Jiryu Davis）的文章和演讲。
在阅读了许多文章和讲座之后，并在设计了超过一年的波斯菊系统设计之后，我逐渐了解了这些开发原则。
让我们从一个简单的开始。
我们有一个按钮：
<Button>Click me</Button>
您可能还需要主按钮，该按钮是页面上的主要操作所必需的。 我曾经喜欢构建API，就好像我可以说“给我主按钮”一样：
<Button>Click me</Button> <Button primary>Click me</Button>
现在，与通常使用按钮的情况一样，您将需要更多选项。 这是几个按钮道具的表格：
您可以使用多种道具来更改按钮的外观。 如果有人一起使用它们会怎样？
<Button primary destructive> Click me </Button>
他们会赢吗？ 它取决于什么？ 从命令？
为什么有人会写这个？ 当您需要说“给我一个primary destructive按钮”时，是否存在真实情况？
在大多数情况下，这是一个错误。 但是，如果开发人员根本不得不问这样的问题（例如上述问题），那么这可能不是一个很好的API。
对于那些决定API是什么的人来说，重要的是：
- 减少错误
- 最小化API的混乱
因此，这里是技巧1： 不要创建冲突的道具。
我们可以使用prop轻松修复以上代码，该代码可以让您获得选项列表。 称之为appearance
<Button appearance="default">Click me</Button> <Button appearance="primary">Click me</Button> <Button appearance="destructive">Click me</Button>
我们可以使用prop-types添加支持的appearance选项列表。
Button.PropTypes = { appearance: PropTypes.oneOf(['default', 'primary', 'secondary', 'link', 'destructive']) }
现在，即使开发人员犯了一个错误，他也将在其开发工具中收到关于此的警告。
<Button appearance="danger">Click me</Button>
: : `prop` `appearance` `danger` `Button`, : `["default", "primary", "secondary", "link", "destructive"]`
这个技巧很容易实现，但是它将使您的API更加易于使用（和支持）。
通过翻译-随着更多文章的翻译和新文章的发布，我将在本系列文章的开头更新文章列表。