从其高阶组件获取包装组件的名称

Question

说我的HOC是：

import React, { Component } from "react";

let validateURL = WrappedComponent =>
  class extends Component{

    render() {
         if( wrappedcomponentnameis === 'xyz')
                 return ...
         elseif(wrappedcomponentnameis === 'abc')
                  return ...
         and so on....
    }
  };

export default validateURL;

如何获取此HOC中包装的组件的名称？

Answer 1

您可以通过[Symbol.iterator]访问它：

arr.forEach(element => {
    if (element.val > 5) {
         element = 9;
    }
});

WrappedComponent.name

但是，我宁愿将可选的道具传递给const HOC = WrappedComponent => class Wrapper extends React.Component{ render() { if (WrappedComponent.name === 'Hello') { return <WrappedComponent name='World' /> } return <WrappedComponent/> } } class Hello extends React.Component { render() { return <div>Hello {this.props.name}</div> } } const App = HOC(Hello) ReactDOM.render( <App />, document.getElementById('container') );以便控制其行为，因为它比使用<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>更为安全，而不是依靠HOC。

例如：有许多库（如redux，react-router等）通过HOC机制为您的组件提供了某些功能。当此库包装您的组件时，WrappedComponent.name将指向库HOC名称，并且将无声地破坏您的逻辑。

以下是传递自定义道具的方法：

WrappedComponent.name