用高阶组件包装递归组件

Question

Let's say that I have a simple component, and I want to log when it mounts. I can do this with a HOC that takes my component, defines a componentDidMount function, and returns a new component. Then I can create a new component let MyLoggedComponent = withLog(MyComponent) and use MyLoggedComponent where I want.

But let's say I have a recursive component, that is somewhere in it's render function it calls itself again:

class MyRecursiveComponent extends React.Component {
  ...
  render() {
  ... <MyRecursiveComponent />
  ...
}

Now, when I wrap this component let MyLoggedComponent = withLog(MyRecursiveComponent) , only the outer instance of MyRecursiveComponent will be wrapped, and componentDidMount function will only fire once.

How can I wrap a recursive component so that it effects all instances of it?

Answer 1

You can get wrapped component right in the MyRecursiveComponent :

class MyRecursiveComponent extends React.Component {
  const MyRecursiveComponentWithLog = withLog(MyRecursiveComponent);
  render() {
    ... 
    <MyRecursiveComponentWithLog />
    ...
  }
  ...
}