为什么 HTML UI 元素在反应原子设计中作为原子？
Why HTML UI element as an atom in react atomic design?
我正在与原子设计中的原子作斗争。为什么我需要为已经建立的 HTML UI 元素制作一个组件？是不是多余？
假设我有一个按钮，在分子中而不是使用 <button>Label</button> 我将被迫使用组件 <Button myOwnLabel="Label" />，其中只是呈现相同的旧按钮。
我看不出制作另一个文件的好处。能帮我看看吗？
谢谢。
在 React 中使用 <button> 没有错。我一直在一些不需要为每个元素都使用复杂组件的小项目中使用它。
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>
它会反映在它的所有实例中。
希望这对您有所帮助。
我正在与原子设计中的原子作斗争。为什么我需要为已经建立的 HTML UI 元素制作一个组件？是不是多余？
假设我有一个按钮，在分子中而不是使用 <button>Label</button> 我将被迫使用组件 <Button myOwnLabel="Label" />，其中只是呈现相同的旧按钮。
我看不出制作另一个文件的好处。能帮我看看吗？
谢谢。
在 React 中使用 <button> 没有错。我一直在一些不需要为每个元素都使用复杂组件的小项目中使用它。
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>
它会反映在它的所有实例中。
希望这对您有所帮助。