Laravel 中如何在Javascript/React组件内无需data属性直接使用翻译

下面提供两种不需要通过组件data属性传递翻译的实现方式：

方案1：Blade直接注入全局翻译变量（推荐，无需额外构建配置） #

该方案直接在页面加载时将当前语言的全部翻译注入到JS全局作用域，React组件可直接读取，不需要给组件传递任何data属性。
操作步骤：

1. 在引入React入口JS的Blade模板中，插入以下代码，位置早于React脚本的引入：

<script>
// Laravel 内置的 `__('*')` 会自动返回当前 locale 对应的全部翻译数组
window.LaravelTranslations = @json(__('*', [], app()->getLocale()));
</script>

2. 在React项目中封装通用翻译钩子，所有组件可直接调用：

// hooks/useTranslation.js
export default function useTranslation() {
  // 支持占位符替换，和Laravel的__方法使用逻辑对齐
  const t = (key, replace = {}) => {
    let translated = window.LaravelTranslations?.[key] ?? key;
    Object.entries(replace).forEach(([placeholder, value]) => {
      translated = translated.replaceAll(`:${placeholder}`, value);
    });
    return translated;
  }
  return { t };
}

3. 组件内使用示例：

import useTranslation from './hooks/useTranslation';

function UserProfile() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('profile.title')}</h1>
      <p>{t('profile.welcome', { name: '张三' })}</p>
    </div>
  )
}

方案2：静态导出翻译为JSON文件（无全局变量污染，完全脱离Blade依赖） #

如果不想污染JS全局作用域，可以通过Artisan命令把PHP翻译数组导出为静态JSON文件，React代码可以直接导入使用，完全不需要和Blade做任何交互。
操作步骤：

1. 生成导出翻译的命令行工具：
   执行php artisan make:command ExportTranslations生成命令文件，编辑文件内容：

<?php
namespace App\Console\Commands;

use Illuminate\Console\Command;

class ExportTranslations extends Command
{
  protected $signature = 'translations:export';
  protected $description = '导出所有翻译为JSON文件供前端使用';

  public function handle()
  {
    // 替换为你项目支持的语言列表
    $supportedLocales = ['zh-CN', 'en', 'ja'];
    $exportPath = resource_path('js/lang/');

    if (!is_dir($exportPath)) {
      mkdir($exportPath, 0755, true);
    }

    foreach ($supportedLocales as $locale) {
      $translations = __('*', [], $locale);
      file_put_contents(
        $exportPath . $locale . '.json',
        json_encode($translations, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)
      );
    }

    $this->info('翻译文件导出完成');
    return self::SUCCESS;
  }
}

2. 执行php artisan translations:export即可在resources/js/lang/目录下生成对应语言的JSON翻译文件。你可以将该命令加入composer.json的post-update-cmd列表中，每次代码更新自动同步翻译。
3. React中直接导入使用：

// 可根据页面html标签的lang属性动态加载对应语言
const currentLocale = document.documentElement.lang || 'zh-CN';
const translations = require(`./lang/${currentLocale}.json`);

const t = (key, replace = {}) => {
  let translated = translations[key] ?? key;
  Object.entries(replace).forEach(([k, v]) => translated = translated.replaceAll(`:${k}`, v));
  return translated;
}

// 组件内直接调用t函数即可
function Cart() {
  return <div>{t('cart.total', { count: 3 })}</div>
}

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