react-latex数组使用问题：JSX大括号冲突导致无法渲染LaTeX数组

数据老陈

2026-5-25

解决react-latex中LaTeX数组与JSX大括号冲突的问题

太懂这种折腾完Node、npm、yarn和nvm，终于能测试react-latex，结果卡在数组渲染上的崩溃感了！咱们一步步来解决：

首先，先修正LaTeX语法错误

你代码里的\begin{arrray}多写了一个r，应该是\begin{array}，这个拼写错误会直接导致LaTeX解析失败，先把这个改过来！

核心问题：JSX大括号与LaTeX大括号的冲突

JSX里的{}是用来插入JavaScript表达式的，所以你直接写LaTeX的{}会被JSX当成表达式解析，而不是LaTeX语法的一部分。解决方法有两种：

方法1：双重转义LaTeX中的大括号

在JavaScript字符串里，\本身需要转义，所以要表示LaTeX里的\{，你需要写成\\{，同理\}写成\\}。同时换行符\\也要转义成\\\\。

示例代码：

<Latex displaymode={true}>
  \\left\\{ \\begin{array}{cc|c} 1 & 1 & 1 \\\\ 2 & 2 & 2 \\\\ 3 & 3 & 3 \\end{array} \\right\\}
</Latex>

方法2：把LaTeX内容提取到单独变量中

这种方式更清晰，避免在JSX里写一堆转义字符，可读性更好：

import Latex from 'react-latex';

function YourComponent() {
  // 用模板字符串存储LaTeX内容，转义规则和上面一致
  const matrixLatex = `\\left\\{ \\begin{array}{cc|c} 
    1 & 1 & 1 \\\\ 
    2 & 2 & 2 \\\\ 
    3 & 3 & 3 
  \\end{array} \\right\\}`;

  return (
    <Latex displaymode={true}>{matrixLatex}</Latex>
  );
}