结合使用Katex和React JS，矩阵的元素被放置在矩阵之外

import React from 'react';
import 'katex/dist/katex.min.css';
import { renderToString } from 'katex';

class MatrixComponent extends React.Component {
  render() {
    // 定义矩阵元素
    const matrix = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ];

    // 使用Katex将矩阵渲染为HTML
    const renderedMatrix = matrix.map(row => (
      <div className="matrix-row">
        {row.map(element => (
          <div className="matrix-element" dangerouslySetInnerHTML={{__html: renderToString(element)}}></div>
        ))}
      </div>
    ));

    return (
      <div className="matrix-container">
        {renderedMatrix}
      </div>
    );
  }
}

.matrix-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.matrix-row {
  display: flex;
}

.matrix-element {
  margin: 10px;
}