Question

function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}


class FancyButton extends React.Component {
  focus() {
    // ...
  }

  // ...
}

// Rather than exporting FancyButton, we export LogProps.
// It will render a FancyButton though.
export default logProps(FancyButton);

我从react文档中获取了这些代码，但是对于

期间实际发生的事情我感到困惑

export default logProps(FancyButton);

我的想法是，它可能会调用函数logProps，该函数在React中被认为是一个更高阶的组件，在这种情况下，应该使用大写字母来避免歧义。 logProp函数定义了一个类组件LogProps，该类组件LogProps呈现了一个参数组件FancyButton。然后从该函数返回类组件LogProps。

import FancyButton from './FancyButton';

const ref = React.createRef();

// The FancyButton component we imported is the LogProps HOC.
// Even though the rendered output will be the same,
// Our ref will point to LogProps instead of the inner FancyButton component!
// This means we can't call e.g. ref.current.focus()
<FancyButton
  label="Click Me"
  handleClick={handleClick}
  ref={ref}
/>;

然后从函数logProps返回的组件（LogProps，FancyButton）被导入并在

处实例化。

<FancyButton
  label="Click Me"
  handleClick={handleClick}
  ref={ref}
/>

这正确吗？

Answer 1

这正确吗？

差不多。

文档link to code中所述：

是函数，它接受一个组件并返回一个新组件。

HOC的名称不能以大写字母开头。
无需命名返回的组件。

为简化起见，HOC函数基本上只是返回一个新的增强组件。就是这样。

这也将起作用：

// camel case
function logProps(WrappedComponent) {
  // no name
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} {...this.someEnhancements} />;
    }
  }
}

导出React高阶组件

1 个答案: