React中为组件默认参数配置i18n翻译（无需useEffect）

现有如下AlertDialog组件：

const AlertDialog = ({ title = "Alert", ...props }) => {
  return (
   <div>{title}</div>
  );
};

希望为title参数的默认值配置i18n翻译，但useTranslation提供的t函数只能在组件初始化后才能获取。请问是否有无需使用useEffect的实现方式？

预期效果：父组件传入翻译后的字符串时使用该值，未传入时则使用默认翻译值，示例如下：

return (<AlertDialog title={t(pathToJson,"Something Else")}/>
)

设想的写法（无法运行）：

import { useTranslation } from "react-i18next";

const AlertDialog = ({ title = t(pathToJson,"Alert"), ...props }) => {
  return (
   <div>{title}</div>
  );
};

想到的替代方案（但并非想要的）：

import { useTranslation } from "react-i18next";
import { useState, useEffect } from 'react';

const AlertDialog = ({ title, ...props }) => {

const [translation, setTranslation] = useState('Alert')

useEffect(() => 
{
 if(title === undefined){
    setTranslation('Alert');
 }else{
    setTranslation(t(pathToJson, 'Alert'))
 }
},[])


return (
   <div>{translation}</div>
  );
};

可以直接在组件内部调用useTranslation获取t函数，通过空值合并运算符判断title是否存在，不存在则使用翻译后的默认值，完全不需要useEffect：

import { useTranslation } from "react-i18next";

const AlertDialog = ({ title, ...props }) => {
  const { t } = useTranslation();
  // 若title未传入（为undefined或null），则使用翻译后的默认值
  const displayTitle = title ?? t(pathToJson, "Alert");
  
  return (
    <div>{displayTitle}</div>
  );
};

原理说明 #

• 组件顶层调用useTranslation符合React Hooks规则，此时t函数可正常使用。
• 空值合并运算符??仅在左侧值为undefined或null时返回右侧值，精准匹配“未传入title时用默认翻译”的需求。
• 这种写法直接在渲染阶段处理值，避免了useEffect带来的额外状态更新和渲染周期，代码简洁高效。

另一种等价的条件判断写法：

import { useTranslation } from "react-i18next";

const AlertDialog = ({ title, ...props }) => {
  const { t } = useTranslation();
  
  return (
    <div>{title !== undefined ? title : t(pathToJson, "Alert")}</div>
  );
};

注：如果需要兼容父组件传入空字符串作为合法title的场景，可调整判断逻辑为title !== undefined，但绝大多数场景下空值合并运算符的逻辑已足够覆盖需求。

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