什么是 react-taggy？
react-taggy 是一个用于渲染标记（tags）的 React 组件。它可以方便地构建交互式标记系统，支持自定义样式、事件监听和数据绑定等功能。
安装和使用
使用 npm 安装 react-taggy 很简单：
$ npm install react-taggy --save
安装完成之后，在需要使用 react-taggy 的组件中引入即可：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ ----- ---- -------------- ----- ----------- ------- --------- - -------- - ------ - ----- ------ -------------------- -------- ------- ------------ ---- -- -- ------------------ -- ------ -- - -展开代码
上述代码中，我们创建了一个 MyComponent 组件，并在其中使用了 react-taggy。tags 属性指定了要渲染的标记集合，onChange 属性指定了当标记集合发生变化时的回调函数。
自定义样式
react-taggy 支持自定义样式。可以通过 className 属性指定一个自定义的 CSS 类名，或者使用 style 属性直接指定样式规则：
<Taggy tags={['HTML', 'CSS', 'JavaScript']} className="my-custom-class" style={{ backgroundColor: 'lightgray' }} />
上述代码中，我们为 react-taggy 指定了一个自定义的 CSS 类名 my-custom-class，并为其设置了一个背景色为浅灰色。
事件监听
react-taggy 还支持事件监听。可以通过 onAdd 和 onRemove 属性监听标记的添加和移除事件：
<Taggy tags={['HTML', 'CSS', 'JavaScript']} onAdd={(tag) => console.log(`added tag: ${tag}`)} onRemove={(tag) => console.log(`removed tag: ${tag}`)} />
上述代码中，我们分别为 react-taggy 的 onAdd 和 onRemove 属性指定了回调函数，当标记被添加或移除时将分别触发这两个回调函数。
数据绑定
最后，我们来看一下 react-taggy 的数据绑定功能。可以通过将 tags 属性和 onChange 属性绑定到父组件的状态中，从而实现标记的数据双向绑定：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ ----- ---- -------------- ----- ----------- ------- --------- - ------------------ - ------------- ---------- - - ----- -------- ------ ------------- -- - ------------ - -- ---- -- -- - --------------- ---- --- - -------- - ------ - ----- ------ ---------------------- ---------------------------- -- ---- ------------------------ -- --- ---------------------- ----- ------ -- - -展开代码
上述代码中，我们在父组件 MyComponent 中定义了一个状态变量 tags，并将其作为 react-taggy 的 tags 和 onChange 属性的值进行绑定。每当标记集合发生变化时，都会触发 handleChange 方法从而更新父组件的状态，以及重新渲染标记列表。
总结
通过本文，我们学习了如何使用 react-taggy 渲染标记，以及如何自定义样式、事件监听和数据绑定。react-taggy 的简单易用和灵活性使其成为 React 中一个非常有价值的 npm 包，值得我们进一步尝试和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597181e8991b448d6f68
