如何导出类内多个返回JSX对象的方法并保留在类中？

当然可以！你完全不需要把这些JSX方法都抽成类外的箭头函数，有几种优雅的方式能让你把方法留在类里，同时支持外部调用，还能保持代码的内聚性。

方案1：使用静态方法（无实例依赖时首选） #

如果你的JSX方法不需要依赖类的实例状态（比如不需要访问this.state或者实例属性），直接把它们定义为静态方法，然后导出整个类就行。外部可以通过类名直接调用这些方法，所有逻辑都集中在类内部维护。

示例代码：

class JSXComponentLibrary {
  // 静态方法，无需实例化即可调用
  static renderPrimaryButton(label) {
    return <button className="btn-primary">{label}</button>;
  }

  static renderUserCard(user) {
    return (
      <div className="user-card">
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    );
  }
}

// 导出整个类
export default JSXComponentLibrary;

外部调用方式：

import JSXComponentLibrary from './your-file-path';

// 直接通过类名调用静态方法
const SubmitButton = JSXComponentLibrary.renderPrimaryButton('提交');
const ProfileCard = JSXComponentLibrary.renderUserCard({ name: 'Alice', email: 'alice@example.com' });

方案2：导出实例方法引用（依赖实例状态时使用） #

如果你的方法需要访问类的实例属性或状态（比如内部配置、动态数据），可以先创建一个类的实例，然后把需要外部调用的方法解构导出。这样方法依然留在类里，外部只拿到方法的引用，不会产生零散的函数。

示例代码：

class DynamicJSXRenderer {
  constructor() {
    // 实例状态，比如默认配置
    this.defaultInputPlaceholder = '请输入内容';
  }

  renderStyledInput(placeholder = this.defaultInputPlaceholder) {
    return <input className="styled-input" placeholder={placeholder} />;
  }

  renderToast(message, type = 'info') {
    return <div className={`toast toast-${type}`}>{message}</div>;
  }
}

// 创建类的实例
const rendererInstance = new DynamicJSXRenderer();

// 解构导出需要外部调用的方法
export const { renderStyledInput, renderToast } = rendererInstance;

外部调用方式：

import { renderStyledInput, renderToast } from './your-file-path';

const DefaultInput = renderStyledInput();
const ErrorToast = renderToast('操作失败', 'error');

方案3：导出方法映射（灵活控制暴露范围） #

如果你想更灵活地控制哪些方法对外暴露，可以在类里定义一个静态的方法映射，把需要外部访问的方法挂载进去，然后导出这个映射。这种方式适合需要批量管理暴露方法的场景。

示例代码：

class JSXFactory {
  renderModal(content, isOpen) {
    return isOpen ? <div className="modal">{content}</div> : null;
  }

  renderAvatar(src, size = 'medium') {
    return <img src={src} className={`avatar avatar-${size}`} alt="User Avatar" />;
  }

  // 静态属性：指定对外暴露的方法
  static exposed = {
    renderModal: this.prototype.renderModal,
    renderAvatar: this.prototype.renderAvatar
  };
}

// 导出暴露的方法集合
export const { renderModal, renderAvatar } = JSXFactory.exposed;

注意：如果方法依赖实例状态，这种方式需要你在外部调用时手动绑定实例上下文，或者确保调用时使用的是实例化后的方法（比如方案2的方式更稳妥）。

总结一下：如果方法不需要实例状态，方案1最简洁；如果依赖实例状态，方案2是最直观的选择。两种方式都能让你把方法留在类内，避免类外函数泛滥，同时保持方法之间的关联性。

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