React开发实战（一）——重复组件

));返回;}}代码很简单，我简单说明一下：组件的state持有items字段，用来保存每个item的数据。渲染时，首先获取唯一的子项，然后映射组件状态项，将每个项映射到子项的副本。并为这个copy传入两个属性，onChange接收每个item的数据变化，value传递每个item当前应该显示的值。另外，Repeat为每个item都准备了一个“Add”按钮和一个“Remove”按钮，用于在当前item位置添加一个item或者移除当前item。原理是删除this.state.items中对应下标处的数组元素。至此，Repeat大致成型。需要提醒的是，React.cloneElement和React.Children.xxx等API通常只在这类公共组件中使用，在大多数场景下应谨慎使用。和children有约定有些同学可能已经发现了，在上面的例子中，Repeat的children是一个input，所以如果是另外一个组件，就结束了。这是第一个问题。为了解决这个问题，Repeat需要为其子级提供两个条件：属性必须接收一个onChange回调函数，该函数接收一个对象参数。参数结构如下：{target:{value:'xxxx'的值}}value是当前item的输出数据，可以是对象也可以是字符串也可以是值。没错，就是想兼容inputevent的数据结构。您当然可以使用您喜欢的任何方便的数据结构。子组件需要接收一个valueprop来显示它的值。换句话说，子组件应该是受控组件。这是一个协议。如果你想在某个组件中通过Repeat组件方便地添加多个副本并获取一组数据，就必须遵守这个协议。有的同学可能会说为什么不聪明点呢？好吧，在这里我想分享一点个人经验：有时候，尤其是在业务开发过程中，将public部分抽取出来重用就可以了。没必要搞得这么“厉害”。遵循协议很容易完成，实际上会更高效，更容易让人理解。事实上，计算机世界充满了协议。比如，你想让HTTPServer返回一个正确的响应，就必须遵循http协议与之通信；你生产的显卡是可以买到的，必须遵守相应的协议。可以插在别人生产的主板上。离这很远！收到！是的，有了上面的约定，Repeat的一行代码没有加，是不是感觉功能提升了很多？嗯，这就是目的。下面我们来实现文章开头提到的第二种场景。聪明的你一定已经知道怎么做了，是的，只要我们实现一个UserForm组件，让它满足上面的约定即可。请看代码：classUserFormextendsReact.Component{handleFieldChange(e){const{name,value}=e.target;constformData={...this.props.value,[name]:value,}this.props.onChange({target:{value:formData,}});}render(){constformData=this.props.value||{};return()}}为了让代码更简洁，我实现了UserForm组件作为支撑controlledComponents，但是在现在的业务场景下已经足够了。在实际情况中，您可以根据自己的需要进行调整。通过这个例子，希望大家能够体会到组件拆分的一个好处。即UserForm和Repeat拆分成两个组件后，UserForm的复用性会更高。可以想象，批量添加用户后，是否可以在编辑单个用户时继续使用该组件。那么对于第三种情况，我觉得没有必要再去实施了。实际上可以嵌套尽可能多的Repeat层。更进一步实际上，在实际应用中，Repeat组件还需要进一步完善，其中之一就是样式，而且有可能在不同的场景下，虽然交互相同，但样式会有所不同。另外，默认有“Add”和“Remove”两个文本按钮。实际业务场景中可能会有+、-两个图标按钮；“添加”和“删除”的位置可能会发生变化。如何处理这些问题？我给大家描述一下思路，具体的代码我就不写了。如果您有任何问题，可以给我留言。关于样式，可以在Repeat中添加itemClassName和buttonsClassName两个属性，分别作为每个item和按钮区域的cssclass。这样就可以在不同的场景下指定不同的样式。关于如何将文本按钮变为图标按钮，可以在Repeat中添加renderButtons等函数属性。如果不指定，按钮将以默认方式渲染，如果有，则勇于返回渲染属性的值。最后，这是本文的代码：https://codepen.io/Sarike/pen...好了，文章到此结束，有什么问题可以给我留言。谢谢大家，祝大家国庆中秋快乐。