react-markdown自定义渲染table

在React-Markdown中，可以使用自定义渲染器来渲染Markdown文本中的表格（table）。以下是一个示例：

import ReactMarkdown from 'react-markdown';

// 定义自定义渲染器
const renderers = {
  table: ({ children }) => (
    <div className="table-responsive">
      <table className="table table-striped">{children}</table>
    </div>
  ),
  tableCell: ({ isHeader, children, align }) =>
    isHeader ? (
      <th style={{ textAlign: align }}>{children}</th>
    ) : (
      <td style={{ textAlign: align }}>{children}</td>
    ),
};

// 在React组件中使用ReactMarkdown和自定义渲染器
function MarkdownTable(props) {
  const { markdown } = props;

  return (
    <ReactMarkdown renderers={renderers} source={markdown} />
  );
}

在上面的代码中，我们定义了一个包含两个自定义渲染器的`renderers`对象，其中`table`渲染器用于渲染表格元素，`tableCell`渲染器用于渲染表格单元格元素。在渲染表格单元格元素时，我们根据`isHeader`属性来判断是否为表头单元格，如果是表头单元格，则使用`th`元素进行渲染；否则，使用`td`元素进行渲染。在渲染表格元素时，我们使用`div`元素包装表格，并添加了Bootstrap的CSS类以实现响应式和条纹效果。最后，在React组件中使用ReactMarkdown组件和自定义渲染器即可实现自定义表格渲染。