「Solid.js项目实战」礼品发放Web应用之三

科技 06-20 来源：计算机科学技术

「Solid.js项目实战」礼品发放Web应用之二
 「Solid.js项目实战」礼品发放Web应用之一

功能介绍

本文将继续上一篇文章的内容，Signal和Effect是整个Solid响应系统的基础，我们再通过一个礼品列表实例演示下使用Signal控制界面的方法。之后介绍了需要对代码执行组件化的一个情景，展示了代码是如何随着业务的需要而不断地进行组件化，它可能是由于某个组件的功能过于复杂了，也可能是由于组件中出现了冗余的代码。最后，介绍了组件之间进行通讯的一种机制-props，props实现了父组件向子组件传递数据的功能。

列表数据

Solid的Signal的初始状态不仅仅是一个数值，它还可以是一个对象或一个数组。礼品列表数据目前使用的是HTML的值，只有第一个列表项的内容将礼品的数量值绑定到了一个Signal上，它在上一篇文章《礼品发放Web应用之二》中我们采用了Signal方式实现的。现在我们需要实现的功能是将整个礼品列表中的所有数据（包括礼品的名称和数量）全部绑定到Signal上。我们使用一个含有三个属性的对象表示礼品的数据信息，它的三个属性是id属性、name属性和count属性。将4个列表项保存到一个数组giftData中，如下图1所示。

图1

图1中id属性唯一地标识了一个礼品对象，但它不会显示在礼品列表界面上。礼品对象数组建立之后，创建礼品列表数组所对应的Signal，并将giftData数组作为Signal的初始值，如下图2所示。

图2

图2中第27行代码创建了一个Signal对象，之后通过使用gifts获取礼品数组，通过setGifts修改礼品数组。

与普通的Signal用法相同，但是这个Signal的返回值类型为数组类型，在使用时需要像访问数组的方式使用它，比如获取第一个礼品的方式为gifts()[0]，计算礼品个数的方式为gifts().length。我们使用这个Signal来实现Gift组件，如下图2所示

图3

图3中第34行代码的第一个表达式gifts()[0].name的含义是：调用礼品列表Signal的getter方法gifts()获取到当前Signal的礼品数组，通过下标0访问数组中的第一个礼品对象，最后获取到礼品对象的name属性，这样礼品的名称就显示到span元素中了。第34行代码的第二个表达式gifts()[0].count与第一个表达式只有在最后获取对象属性时有所不同，其它的操作是完全相同的，它表示的是获取这个礼品对象的数量值。同样的道理，第37、40和43行代码分别获取数组中不同位置的礼品对象，并设置对应的礼品名称和数量。

当看到图3中的代码时，这4个礼品项目界面的布局是完全相同的，我们可以将它抽象为一个更小的组件，我们将其命名为GiftItem组件，将其定义为如下的代码：

图4

图4中的代码使用了gifts中的第一个礼品对象，但是其它的3个礼物对象也应该使用对应的索引值获取各自的礼品对象，而不是一直使用同样的数据，这样就需要提供一种机制将图4中第33行代码中的表达式改为动态的，即允许从组件的外部传递参数进来，GiftItem组件依据不同的参数展现不同的内容。这就是Solid提供的组件间数据交互的props机制。

Props

Props是Solid提供给组件与它的子组件进行交互的一种机制。在子组件中定义一个props参数，并在使用这个属性的地方通过props访问属性名字，父组件就像使用普通的HTML属性一样设置它的数值即可，如下图5所示

图5

图5中第30行代码将props作为组件GiftItem的一个参数，第33行代码使用props.gift获取父组件传递给这个组件的gift属性，这个gift属性是礼品对象，所以可以通过.name和.count分别获取它的名称和数量。与图4中的组件相比，这个组件实现了参数传递功能，实现此功能之后，我们就可以将每一个组件所对应的礼品对象通过gift属性传递给GiftItem组件，组件便会自己执行渲染操作。

图6

使用GiftItem组件之后礼品列表组件的内容简化为图6中的模样了，相比之前的代码，清晰了许多。什么？丢失了一个功能！是的，之前的礼品列表中第二项选中效果被弄没了，没关系，我们将列表选中效果再通过props实现一遍。

组件中的props参数对使用的属性数量是没有限制的，它可以指定多个属性名称。比如我们将selected作为一个props的属性传递至GiftItem组件，如下图7所示。

图7

图7中在GiftItem组件中添加对selected类的使用，第32行代码将其作为div元素classList属性的selected的属性值，如果props中的selected为真值，那么，selected类就会应用到这个div元素上，反之，则不会添加selected类。修改完成子组件GiftItem之后，我们再回到父组件Gift中将属性selected值设置为真值，如下图8第42行代码所示，当selected为真值时，第2个列表项GiftItem中的selected类就会生效，即显示出选中效果。