Question

我正在为各种React组件构建一个更高阶的组件。在这个HOC中，我需要访问子进程并调用它们。我该怎么做？

示例HOC：

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      if (Component.someFunction) {
          Component.someFunction()
      }
    }

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

示例组件：

class App extends React.Component {
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

// then it's used like this
export default withHOC(App)

我知道在某些情况下，解决它可能没有意义，但是例如框架Next.js可以用它的getInitialProps函数做类似的事情。

Answer 1

由于你想在HOC的componentDidMount中调用子组件方法，一个更好的选择是确实在组件本身的componentDidMount中调用该方法，这将考虑子组件没有＆＃39; t有一个函数或者它是由多个HOC组成的，如

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

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

class App extends React.Component {
  componentDidMount() {
     this.someFunction();
  }
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

但是，如果您仍想在子组件中调用该函数，则可以使用refs（但如果App组件由其他HOC组成，则无法工作）

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }
    componentDidMount() {
         this.cmp.someFunction();
    }
    render() {
      return <Component ref={(ref) => this.cmp = ref} {...this.props} />;
    }
  };
}

class App extends React.Component {
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

Answer 2

如果替换：

if (Component.someFunction) {
  Component.someFunction()
}

通过：

if (this.someFunction) {
  this.someFunction();
}

您应该能够访问组件实例功能。

此外，next.js getInitialProps函数是静态的，这就是为什么你可以直接从组件类访问它。

在HOC中访问React组件的功能

2 个答案: