React 开发实战(一)- Repeat 组件

1,636 阅读8分钟

前言

最近在写一个面向 React 初学者的系列教程玩转 React,内容对有 React 开发经验的同学来说可能太过于基础和啰嗦,不太感兴趣。所以我打算同时开始另外一个系列文章《React 开发实战》。该系列主要面向有 React 开发经验的同学,更侧重 React 实战,每一篇文章会跟大家一起开发一个 React 组件或者一个简单有趣的 React 应用,这些组件或者应用往往满足如下特点:

  • 在我的实际项目中用到过的。
  • 在常见的开源组件库中没有的。
  • 有点小众,但是在特定的业务场景下能很大地提高项目的开发效率。
  • 可能还比较有趣。

如果这些组件能直接应用到大家的实际开发中去,那再好不过了;如果不能,能给大家一点启发,我觉得这件事情也是很有价值的。

另外,每一篇文章后面都会附有本篇文章的完整示例和代码。

问题描述

大家应该都见过这种应用场景,页面上的某一部分,需要能够让用户添加任意多项。

可能是表单中的一个字段,如下所示。

图片描述
图片描述

也可能是表单的一部分,如下所示,用户可以在一个表单内增加多个用户信息,然后将用户信息批量进行保存。

图片描述
图片描述

还有更变态的,如下所示,一个表单内用户信息部分可以添加多份,每一个用户信息中地址也可以添加多份。(Oh, My God. PM,你杀了我吧。)

图片描述
图片描述

还好,React 应付这种需求,还是小菜一碟。但是在一个 web 应用中有这么多的相似场景的话,如果我们挨个实现一遍,那真是太枯燥了,与搬砖无异。遇到这种情况,就需要我们把相同的功能抽象出来,做成组件,这将极大地提升你的开发效率。

基于这个场景,我们今天就开发一个能让其 children 重复任意多份的组件,我们就称之为 Repeat 吧。

你期望 Repeat 组件该怎么用

在开发一个组件的时候,不要着急写代码,先想想你要把这个组件做成什么样子,例如这个 Repeat 组件,我希望有如下特性:

  • Repeat 组件提供默认的,添加、移除按钮。
  • 点击添加,将 React 的 children 复制一份,点击移除将某一项移除。
  • 当只有一项时不能移除。
  • Repeat 支持 onChange 回调函数,当 Repeat 内的表单输入发生变化时可以即时通知其父组件。

然后在代码中我期望可以这样来用 Repeat 这个组件:

class App extends React.Component {
    handleChange(items) {
        console.info(items);
    }
    render() {
        <Repeat onChange={items => this.handleChange(items)}>
            <input  type="text" />
        </Repeat>
    }
}

OK,就是这么简单,这样 Input 组件就可以重复加添多份了。基于这个构想,我们来实现 Repeat 这个组件。

开始实现 Repeat 组件

class Repeat extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [''],
        };
    }
    handleChange(e, index) {
        const items = [...this.state.items];
        items[index] = e.target.value;
        this.setState({ items });
        this.props.onChange(items);
    }
    handleAddItem(e, index) {
        e.preventDefault();
        const items = [...this.state.items];
        items.splice(index, 0, '');
        this.setState({ items });
    }
    handleRemoveItem(e, index) {
        e.preventDefault();
        if (this.state.items.length === 1) return;
        const items = [...this.state.items];
        items.splice(index, 1);
        this.setState({ items });
    }
    render() {
        const children = React.Children.only(this.props.children);
        const elementItems = this.state.items.map((item, index) => (
            <div key={index}>
                {
                    React.cloneElement(children, {
                        onChange: e => this.handleChange(e, index),
                        value: item,
                    })
                }
                <div>
                    <a href="#" onClick={e => this.handleAddItem(e, index)}>添加</a>
                    <a href="#" onClick={e => this.handleRemoveItem(e, index)}>移除</a>
                </div>
            </div>
        ));
        return <div>{elementItems}</div>;
    }
}

代码很简单,简单解释一下:

  • 组件的 state 中持有 items 字段来保存每一个项的数据。
  • render 时先获取到唯一的 children,然后 map 组件 state 中的 items,将每一项映射为 children 的一个副本。并为这个副本传入两个属性,onChange 接收每一项的数据变化,value 传递每一项当前应展示的值。
  • 另外 Repeat 为每一项准备了一个“添加”按钮和一个“移除”按钮,用来在当前项位置新增一项或者移除当前项。原理就是将 this.state.items 中对应下标处的数组元素删掉就好了。

到此,Repeat 是不是大致有模有样了呢。需要提醒大家的是,React.cloneElementReact.Children.xxx 这些 api 通常只会在这种公共组件中使用,在大部分场景,尽量少用。

跟 children 有个约定

有些同学可能已经发现了,上面例子中, Repeatchildren 是个 input,那如果是一个其他的组件不就完蛋了嘛。

这是第一个问题,为了解决这个问题呢,Repeat 需要对它的 children 提两个条件:

  1. 属性上必须要接收一个 onChange 回调函数,函数接收一个对象参数,参数结构如下:

    {
      target: {
          value: 'xxxx'
      }
    }

    value 的值为当前项产出的数据,可能是个对象也可能是字符串或者数值。没错,我就是为了兼容 input event 的数据结构。你当然可以用任何你喜欢的且方便处理的数据结构。

  2. children 组件需要接收一个 value 属性,以展示其拥有的值。也就是说 children 组件应当是一个受控的(controlled)组件。

这就是一个协议,你希望某个组件内通过 Repeat 组件方便地添加多份并能获取到一组数据,那就必须要遵守这个协议。有同学可能会说为什么不搞的智能一点呢?嗯,这里我想分享一点个人经验:有些时候,尤其是在业务开发过程中,把公共部分抽取出来复用即可,点到为止,没有必要搞得那么“强大”,剩下的事情让一个很容易遵守的协议来完成,其实效率会更高,更容易让人理解。

其实在计算机的世界中处处充满了协议,例如你想让 HTTP Server 返回正确的响应,你必须要遵循 http 协议来和它通信;你生产的显卡能买的出去,必须要遵守相应的协议,要能插到别人家生产的主板上。

扯远了!收!

对,有了上面这个约定以后,Repeat 一行代码未加,是不是感觉功能完善了许多?嗯,就是这个目的。现在我们来实现一下文章开始时候说的第二个场景。

聪明的你一定已经知道该怎么做了,没错,只要我们实现一个 UserForm 组件,并让他满足上面的约定即可。请看代码:

class UserForm extends React.Component {
    handleFieldChange(e) {
        const { name, value } = e.target;
        const formData = {
            ...this.props.value, 
            [name]: value,
        }
        this.props.onChange({
            target: {
                value: formData,
            }
        });
    }
    render() {
        const formData = this.props.value || {};
        return (
            <div>
                <div>
                    <label for="">姓名</label>
                    <input
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={e => this.handleFieldChange(e)}
                    />
                </div>
                <div>
                    <label for="">地址</label>
                    <input
                        type="text"
                        name="addr"
                        value={formData.addr}
                        onChange={e => this.handleFieldChange(e)}
                    />
                </div>
            </div>
        )
    }
}

为了让代码更简洁,我把 UserForm 这个组件实现为了一个支持受控的组件,但是在目前的业务场景下已经足够了,在实际情况下,你可以按需调整。

通过这个例子,还希望大家能体会到组件拆分的一个好处。就是,UserFormRepeat 拆分成两个组件以后,UserForm 的复用性会更强。可以想象一下,当用户被批量添加以后,是不是有可能在编辑单个用户的时候,可以继续使用这个组件。

好啦,关于第三个场景我想就没有必要再实现一遍了,Repeat 嵌套多少层其实都是可以的。

更进一步

实际上在实际应用中,Repeat 这个组件还需要做进一步完善,其中一个就是样式,还有可能在不同的场景下,虽然交互都是这样,但样式会有所差异。另外默认是“添加”、“移除”两个文字按钮,说不定实际业务场景中是两个 +,- 的图标按钮;还有可能“添加”、“移除”的位置为有所变化。

这些问题怎么处理呢?下面给大家描述下思路,具体代码就不写了,如果有什么疑问可以给我留言。

  1. 关于样式,你可以给 Repeat 添加 itemClassNamebuttonsClassName 两个属性分别为每一项和按钮区域的 css class。这样你就可以在不同的场景下指定不同的样式了。

  2. 关于如何将文字按钮改为图标按钮,你可以给 Repeat 添加 renderButtons 这样一个函数属性,如果未指定则用默认的方式渲染按钮,如果有则勇气返回值渲染属性。

最后

这是本篇文章的代码:codepen.io/Sarike/pen/…

好啦,文章就到这吧,如果有什么疑问可以给我留言。谢谢大家,祝大家国庆、中秋节快乐。


PS:本系列的所有文章将在 segmentfault 和 掘金同步发布。

本作品保留所有权利。未获得许可人许可前,不允许他人复制、发行、展览和表演作品。不允许他人基于该作品创作演绎作品 。