React表格单元格条件语句中混排文本HTML报错求助

你遇到的报错大概率是修改代码时破坏了条件表达式的语法结构，或是逻辑运算符优先级导致的逻辑异常。原本的三元表达式写法是正确的，但添加"birthday"文本时如果误改了表达式结构，就会引发语法错误或显示异常。

修正方案1：保留模板字符串的三元表达式写法 #

直接在真值部分的模板字符串中拼接"birthday"文本，确保整个三元表达式结构完整：

cell: (row) => (
  <>
    <div className="dob">{`${row.firstName} ${row.lastName} ${
      history.location.pathname.toLowerCase().includes('search') && row.maidenName ? `(${row.maidenName})` : ''
    }`}</div>
    <div>{`${
      history.location.pathname.toLowerCase().includes('search') && row.birthdate 
        ? `birthday: ${formatDate(new Date(row.birthdate))}` 
        : ''
    }`}</div>
  </>
),

注意：React中DOM元素的类名需用className替代class，避免关键字冲突警告。

修正方案2：改用JSX条件渲染（推荐新手使用） #

这种写法无需拼接字符串，直接通过JSX的条件判断控制内容，更直观且不易出错：

cell: (row) => (
  <>
    <div className="dob">
      {row.firstName} {row.lastName}
      {history.location.pathname.toLowerCase().includes('search') && row.maidenName && (
        <span>({row.maidenName})</span>
      )}
    </div>
    <div>
      {history.location.pathname.toLowerCase().includes('search') && row.birthdate && (
        <>birthday: {formatDate(new Date(row.birthdate))}</>
      )}
    </div>
  </>
),

关键注意点 #

• 模板字符串中使用三元表达式时，必须保证条件 ? 真值内容 : 假值内容的结构完整，新增文本要放在真值部分的模板字符串内。
• 避免用&&直接在模板字符串中拼接内容，条件不满足时&&会返回false，模板字符串会将其转为"false"文本显示，不符合预期。

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