FlightJS组件初始化后暴露翻译文本至本地函数的实现咨询

架构老林

2026-5-15

解决FlightJS组件中翻译文本的跨方法访问问题

我来帮你搞定这个问题～你现在的核心问题是：bindTranslations方法虽然返回了翻译后的文本对象，但你只是在初始化时调用了它，没有把结果存储到组件实例上，导致handlePaymentState方法根本访问不到那些翻译变量。

下面是修改后的完整代码，每一步改动我都标注清楚了：

function paymentForm() {
  // 1. 新增组件属性，用来持久化翻译结果
  this.translations = {};

  this.bindTranslations = function() {
    var buttonText = I18n.t('js.process_payment_button');
    var paragraphText = I18n.t('js.process_payment_paragraph');
    return { button: buttonText, paragraph: paragraphText };
  };

  this.handlePaymentState = function() {
    // 2. 从组件实例的translations属性中获取翻译文本
    // 注意：段落标签建议用text()而非val()，val()是针对表单元素的
    this.select('submitButtons').val(this.translations.button);
    this.select('paymentParagraph').text(this.translations.paragraph);
  };

  this.after('initialize', function() {
    // 3. 将bindTranslations返回的翻译对象存入组件属性
    this.translations = this.bindTranslations();
    
    // 如果需要初始化完成就立刻更新文本，可以在这里调用handlePaymentState
    // this.handlePaymentState();
  });
}

export default paymentForm;

关键改动说明：

新增this.translations属性：作为组件实例的共享存储，让所有组件方法都能访问到翻译结果。
初始化时存储翻译结果：在after('initialize')钩子中，把bindTranslations的返回值赋值给this.translations，确保初始化完成后翻译文本已经就绪。
修改handlePaymentState的访问方式：通过this.translations.button和this.translations.paragraph获取翻译文本，避免使用未定义的局部变量。
小提示：针对段落这类非表单元素，用text()（或html()如果需要富文本）来设置内容比val()更合适，val()主要用于input、select这类表单控件。