将逻辑与 ui 组件分离

Question

我是 React 的新手，我有一个抽象的问题。想象一下，我有一个没有任何逻辑的按钮组件。我有2个任务。 1) 我必须在点击时将产品添加到购物车 2) 我必须在点击时提交表格。 我的问题是我可以以某种方式添加逻辑而不修改 按钮组件？ 以组件为基础，重新制作一个并添加我需要的逻辑？

我尝试包装组件并做一些事情，但仍然返回到向我的 ui 组件添加一个新道具

Answer 1

为此，您必须向按钮组件添加一个 onClick 属性，然后将其传递给 jsx 中的 <button /> 元素。在创建 UI 组件时，最好将所有道具传递给包装元素并覆盖样式属性。请参考以下示例。

const CustomUIButton = (props) => <button className="custom-css" style={customStyle} {...props} />
const customStyle = {};

这样您也可以让用户覆盖现有样式。

我希望我已经回答了你的问题。