reactjs - 为什么将 HTML UI 元素作为原子反应原子设计中的原子？

Question

我在原子设计中与原子作斗争。为什么我需要为已经建立的 HTML UI 元素制作一个组件？不是多余的吗？

假设我有一个按钮，在分子中而不是使用<button>Label</button>我将被迫使用<Button myOwnLabel="Label" />内部的组件，该组件只是呈现相同的旧按钮。

我看不到制作另一个文件的好处。你能帮我看看吗？

谢谢你。

score 0 · Accepted Answer

<button>在 React 中使用没有任何问题。我一直将它用于一些不需要每个元素都有复杂组件的小型项目。

React 中面向原子设计的好处是为您的应用程序中的每个元素提供一致的基础。

例如，在您的项目中，所有按钮都是蓝色的，每次有人点击它们时，都会向 Google Analytics 发送一个事件。使用纯 HTML 元素，您将其声明为：

<button className="blue" onClick={sendEvent}>Text<button>

如果您有 100 个按钮，则必须编写此配置 100 次。

此外，有一天，您可能会决定不再跟踪点击次数，您需要删除其中 100 次点击的默认 onClick 事件。

然后您的设计师说，让我们将所有按钮更改为橙色，然后您再次重复整个过程。

这就是使用自定义元素发挥作用的时候。<Button>您可以在单独的组件中声明上述代码。

const Button = () => <button className="blue" onClick={sendEvent}>Text<button>

它看起来和其他地方一样简单<Button>，但实际内容<Button>是动态的。任何更新都只需要您更改组件内的代码。对于上面的例子，要实现所有的变更需求，只需要修改<Button>为

const Button = () => <button className="orange">Text<button>

它将反映在其所有实例中。

希望这可以帮助。

1 回答 1