如何为React类组件内的静态Title组件设置displayName？

嘿，这个问题我之前也碰到过！你遇到的问题是因为类静态字段的初始化顺序导致的——在类内部直接给Title.displayName赋值的时候，这个静态组件还没完全挂载到类上，所以设置不生效。给你几个可行的解决方案：

方案一：定义组件时直接通过Object.assign设置displayName #

把组件函数和displayName一起通过Object.assign赋值给静态字段，这样在定义组件的同时就能设置好显示名称：

import React, { Component } from 'react';

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

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

方案二：在类定义完成后外部设置displayName #

类定义完成后，静态属性Menu.Title已经挂载到类上了，这时候再设置它的displayName就会生效：

import React, { Component } from 'react';

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

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

// 类定义完成后，直接给静态组件设置displayName
Menu.Title.displayName = 'MenuTitle';

方案三：先单独定义组件再赋值给静态字段 #

如果觉得前两种写法不够直观，也可以先把Title组件单独定义好并设置displayName，再赋值给类的静态属性：

import React, { Component } from 'react';

// 单独定义Title组件并设置displayName
function Title({ children, handleTabClick }) {
  return (
    <div className="title" onClick={handleTabClick}>
      {children}
    </div>
  );
}
Title.displayName = 'MenuTitle';

class Menu extends Component {
  static Title = Title;

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

这三种方法都能成功给静态组件设置displayName，你可以根据自己的代码风格选择合适的方式~

内容的提问来源于stack exchange，提问作者Sharon Chai