javascript - 分配 displayName 以 react 静态组件

Question

如何给Title组件起名字？我在它下面尝试了 Title.displayName 我得到了一个错误。

class Menu extends Component {
  static Title = ({ children, handleTabClick }) => {
    return (
      <div className="title" onClick={handleTabClick}>
        {children}
      </div>
    );
  };
  //Title.displayName = 'title' //won't work

  render() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child)
    )
  }
}

除非我在类之外声明 Title，否则我不知道如何给它命名。

Answer 1

函数 name 和 displayName 属性用于调试目的，不是必需的。通常可以忽略它们以支持更精简的代码。

如果 name 是可取的，它可以是:

class Menu extends Component {
  static Title = function Title({ children, handleTabClick }) {
    return (
      <div className="title" onClick={handleTabClick}>
        {children}
      </div>
    );
  };
  ...

或者只是:

class Menu extends Component {
  static Title({ children, handleTabClick }) {
    return (
      <div className="title" onClick={handleTabClick}>
        {children}
      </div>
    );
  }
  ...

name 足以调试，displayName is non-standard大多数浏览器默认不使用。

可以通过装饰器方便地将属性分配给静态方法(如果这是实例方法，分配方式可能会有所不同):

function displayName(name) {
  return (target, prop, descriptor) => { 
    target[prop].displayName = name;
  };
}

class Menu extends Component {
  @displayName('Title')
  static Title({ children, handleTabClick }) {
    return (
      <div className="title" onClick={handleTabClick}>
        {children}
      </div>
    );
  }
  ...