React中使用Higher-Order Component (HOC)样式不生效问题求助

你的问题核心在于：HOC传递的style属性没有被传递到最终的<button>元素上。

你的withEnhancedBtn确实通过props把样式传递给了被包裹的组件（AddButton/DeleteButton），但这两个组件并没有接收props，也没有将样式应用到内部的<button>标签上，导致样式完全没起作用。

修正方案 #

修改AddButton.js和DeleteButton.js，让组件接收props并将其传递给<button>元素：

修改后的AddButton.js

import React from "react";
import withEnhancedBtn from "./withEnhancedBtn.js";

const AddButton = (props) => {
  // 将所有props（包括HOC传递的style）展开到button标签上
  return <button {...props} onClick={() => alert("Added")}>Add</button>;
};

export default withEnhancedBtn(AddButton);

修改后的DeleteButton.js

import React from "react";
import withEnhancedBtn from "./withEnhancedBtn.js";

const DeleteButton = (props) => {
  return <button {...props} onClick={() => alert("Deleted")}>Delete</button>;
};

export default withEnhancedBtn(DeleteButton);

可选优化：合并原有样式 #

如果后续你需要给按钮传递自定义样式，不想被HOC的样式完全覆盖，可以修改HOC中的modifiedProps，合并原有style和HOC添加的样式：

const withEnhancedBtn = (WrappedButton) => {
  const EnhancedButton = (props) => {
    const modifiedProps = {
      ...props,
      // 先展开原有style，再覆盖HOC的样式
      style: { ...props.style, color: "blue", fontSize: 150 },
    };
    return <WrappedButton {...modifiedProps} />;
  };
  return EnhancedButton;
};

这样既保留了HOC的增强样式，也支持自定义传入的样式。

内容的提问来源于stack exchange，提问作者Sushant Kadam