使用 HOC 增强 React 组件

Question

我需要创建一个可重复使用的相机组件，为此我想传递一个自定义记录按钮，我需要附加额外的功能或覆盖按钮文本。

举个例子：

https://codesandbox.io/s/react-hoc-ksjbf

我创建了一个采用自定义组件的 hoc.js 并尝试覆盖文本属性，但出现此错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我不明白哪里错了，有什么想法吗？

Answer 1

问题

您正在将 JSX 文字（即对象）作为道具值传递给（传递给）高阶组件与 React 组件。

recordbutton={<Button text="Original Text" />}

解决方案

改为传递 React 组件

<Camera recordbutton={(props) => <Button text="Original Text" {...props} />} />

或定义并传递

const RecordButton = (props) => <Button text="Original Text" {...props} />;

export default function App() {
  return (
    <div className="App">
      <Camera recordbutton={RecordButton} />
    </div>
  );
}

或者直接传递Button组件

export default function App() {
  return (
    <div className="App">
      <Camera recordbutton={Button} />
    </div>
  );
}

只要您将所有道具传递给组件，那么 HOC 就可以 inject/override 道具值。

更新 HOC 以在提供覆盖之前传播传递的道具，这样 HOC 就可以 实际上 覆盖它们。

function alterText(Component) {
  return function (props) {
    return <Component {...props} text="new text"  />;
  };
}

使用 HOC 增强 React 组件

Enhance react component with HOC

components

reactjs

high-order-component

问题

解决方案