React中如何仅当<Trans>翻译字符串非空时渲染对应<div>组件

• 你当前的判断逻辑从根上就不对：b.description存的是<Trans>组件执行后返回的React元素对象，属于引用类型，不管最终翻译出来的内容是正常文本、空字符串还是全空格，这个对象本身永远是真值，所以b.description &&这个条件永远成立，外层<div>自然每次都会渲染。
• 就算你拿到了翻译后的原始字符串，全空格的空白字符串直接做布尔判断也是真值，不会被自动过滤。
• 顺便提一句：你贴的示例代码有基础语法错误，<Trans>标签没闭合、JSON配置里两个书籍节点之间缺逗号，实际跑的时候要先修正这些问题。

最稳妥的方式是不要提前把<Trans>组件写死在静态数组里，先通过i18next提供的t()方法拿到翻译后的纯文本，做去空格校验后，再决定要不要渲染描述区块：

import { useTranslation, Trans } from 'react-i18next';

export default function BookList() {
  const { t } = useTranslation();
  // 只存书籍id和对应的翻译key，不要提前塞JSX
  const books = [
    { id: 1, nameKey: 'books.firstbook.name', descKey: 'books.firstbook.description' },
    { id: 2, nameKey: 'books.secondbook.name', descKey: 'books.secondbook.description' }
  ];

  return (
    <div className="book-list">
      {books.map(book => {
        // 取翻译文本，去除首尾空格后判断是否有有效内容
        const validDesc = t(book.descKey).trim();
        return (
          <div key={book.id} className="book-item">
            <div className="book-name">
              <Trans i18nKey={book.nameKey} />
            </div>
            {/* 仅当描述有实际内容时才渲染描述div */}
            {validDesc && (
              <div className="book-description">
                <Trans i18nKey={book.descKey} />
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}

如果你因为业务限制必须保留原来把<Trans>存在数组里的写法，那遍历的时候单独取对应翻译key的文本做判断即可，逻辑和上面一致：

const { t } = useTranslation();
// 假设你保留了原有的存了Trans组件的books数组，记得给每个book补上对应的descKey字段
books.map(book => {
  const validDesc = t(book.descKey).trim();
  return validDesc ? <div className="book-description">{book.description}</div> : null
})

如果想减少重复判断，也可以在i18next初始化时加配置，让空字符串翻译直接返回undefined，不过全空格的场景还是建议业务层手动trim()判断，灵活性更高：

import i18n from 'i18next';

i18n.init({
  // 其余初始化配置保持不变
  returnEmptyString: false, // 翻译值为空字符串时直接返回undefined
})

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