javascript - 分配displayName以响应静态组件

如何给标题组件命名？我在下面尝试了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，否则我不知道如何给它命名。

最佳答案

功能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>
    );
  }
  ...

关于javascript - 分配displayName以响应静态组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49912539/