编写复合组件的3个简单步骤

让我们进入带有复合组件的干净React代码的世界。

在React中实现我的第一个复合组件之后，我对这种模式正式上瘾了。 作为这个问题的自称为专家（实际上我是从Ryan Florence及其化合物成分的演讲中学到的），我将教您如何通过几个简单的步骤来学习最佳的高级React模式。 为什么？ 因为您应该拥有更好的代码库！

在这一点上，您可能在想，这家伙是谁？ 他不是肯特·多德斯 （ Kent C. Dodds） ，他撰写了有关复合材料的课程 。 他不是我们心爱的React先知Dan Abramov 。 好吧，我对你的回答是你是对的！

是的，我不是你曾经认识的人。 但是如果您确实想认识我，我叫史蒂文。 您可以在Twitter上关注我。 但是，尽管我还是一个人，但是如果您对复合组件的想法感到兴奋，那么这就是您的指南。

复合组件使您的JSX标记干净。 当逻辑包含在容器组件中时，您可以真正专注于表示。 我第一次编写复合组件时，一个小时的编码会话变成了整夜的编程难题。 我无法抗拒重构我的副项目的整个代码库。

在这6个小时中，我制定了心理指导，以消除设计组件时的猜测。 最重要的是，我在这里与您分享它，以使您的代码库开心。

复合成分的三步指南

好的，您该免费阅读有关编写复合组件的指南。 今天，您将要构建一个多步骤表单向导。 完成后，您将拥有一个可以在任何React项目中使用的干净，可重复使用的表单向导。

当您使用复合组件时，您必须记住，这种模式就是按照编程方式传递道具，就像Ryan Florence所说的那样。 如果您可以围绕这个概念进行思考，那么它将从这里顺畅运行。

步骤1.模拟出所需的JSX标记

您希望通过对相关组件进行分组来使JSX标记易于阅读。 该方法可扩展，因为添加另一个步骤或按钮就像向相关组件组添加另一个组件一样简单。 为底部的基本组件提供动力的逻辑将来自上面的组件。 StepList和ButtonList构成相关组件的第一级。

如果步骤处于活动步骤，则步骤将呈现给定的组件。 如果可能的话， Previous返回上一步。 如果可能， 下一步将向前迈出一步。 提交显示提交消息，但仅在最后一步时显示。 StepList和ButtonList传递道具以确定要在给定步骤上呈现哪些按钮以及哪个步骤处于活动状态。

步骤2.确定您的组件需要什么道具

从这里开始，您将考虑每个容器组件需要哪些道具。 StepList需要确定要呈现给用户的当前步骤。 使用当前步骤道具。 ButtonList在某些步骤上显示Previous ， Next和Submit按钮。 活动步骤和总计步骤有助于确定何时显示每个按钮。 您需要提交功能，因为这是一种表单。 有了道具，就完成了！ 好吧，不完全是。

考虑到道具，您可能会被诱惑像上面看到的那样直接在组件上编写道具，但是有一种更干净的方式来传递道具。 更好的方法是间接传递道具。 你怎么问 React API有两种有用的方法，可用于从现有组件中创建新组件。 那就是React.Children和React.cloneElement变得有用的地方。

步骤3.使用React API连接组件

React最好的部分是组件是常规对象。 与任何对象一样，您可以操纵它们以传递不同的道具和功能，而不必直接注释JSX组件。 React.Children将允许您迭代组件的子代。 React.cloneElement允许您使用现有组件元素中的其他道具创建新组件。

在这里，您可以使用React.Children在FormWizard中迭代子级 。 迭代时，使用React.cloneElement创建一个新组件，并带有要传递给组件树的所需道具。

下一个和上一个按钮使用高级功能onNextStep和onPreviousStep 。 handleSubmit由Submit使用 。 我们将这些道具添加到新的ButtonList组件中以向下传递。 activeStepIndex道具可帮助“ 步骤”组件和“表单”按钮确定是否应渲染。

的 新的Step组件将从StepList获取isActive道具，以知道何时渲染步骤。 ButtonList组件中的功能和状态道具转到需要它们的相应按钮。 我们的表单在第一步中隐藏上一个按钮，在最后一步中隐藏下一个按钮，并在最后一步中显示提交按钮。 在这些情况之外，按钮是可见的。

最后，使用传递给基本组件的道具来确定应渲染的内容。 看，简单！ 排序 我承认有很多事情可以解决。 但是，最重要的是，我和奥普拉都是水瓶座（水瓶座的复数是什么？水瓶座？）：因此，您将获得演示，您将获得演示，每个人都将获得演示！ 这是指南的演示 。

使用React 16.3，您可以使用Context API使FormWizard在道具方面更加灵活。 由于您的应用程序只有几个层次，因此您应该遵循文档中给出的建议。 将相同的数据传递到多个组件的多个级别时，请使用Context。

如果您喜欢此涂料技术指南，请加入《涂料技术爱好者》新闻通讯 ，我们将在此分享正在建立的涂料信息。 现在继续传播复合成分这个词。 与朋友分享这篇文章，让他们兴奋！

干杯!
2018年5月12日

????????嗨！ 我是Steven Natera。 在Twitter @StevenNatera上关注我。 我积极参与开源社区 ，尤其是GatsbyJS 。 我喜欢写有关代码，创业公司，React和Kubernetes的文章。

From: https://hackernoon.com/3-easy-steps-to-writing-compound-components-5d4647b7bb7