html - 如何从strapi文章中获取文本下划线到我的盖茨比前端

Question

我正在使用strapi（后端）和gatsbyjs/react（前端）的支持站点上工作。我正在尝试从我的管理员strapi 中检索带下划线的文本并将其显示在我的前端，但它没有正确检索 <u> 标记，而是显示 <u> 标记而不是带下划线的文本。是因为我的反应降价吗？

这是我的网络视图：当我查看元素检查器时，我在标签前看到了引号，这就是它不起作用的原因

这是我的代码：

import React from "react";
import { graphql, PageProps } from "gatsby";
import ReactMarkdown from "react-markdown";

import { ArticleT } from "@faq/types";

import Layout from "@faq/components/Layout";

import * as s from "./Article.module.css";
import { toArticle, toCategory } from "@faq/utils/routes";

type ArticlePageProps = {
  strapiArticle: ArticleT;
  file: {
    publicURL: string;
  };
};

const Article: React.FC<PageProps<ArticlePageProps>> = ({
  data: { strapiArticle },
}) => {
  const { title, content, category, slug } = strapiArticle;

  return (
    <Layout
      seo={{ pageTitle: title, pageUrl: toArticle(category.slug, slug) }}
      breadcrumb={[
        { to: toCategory(category.slug), label: category.title },
        { label: title },
      ]}
    >
      <div className={s.wrapper}>
        <h1 className={s.title}>{title}</h1>
        <div className={s.author}>
          <div className={s.texts}>
            <div>
              <span className={s.light}>Écrit par</span> Nicolas
            </div>
          </div>
        </div>
        <ReactMarkdown children={content}
          className={s.content}
          transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} />
      </div>
    </Layout>
  );
};

export default Article;

export const query = graphql`
  query ArticleQuery($id: Int!) {
    strapiArticle(strapiId: { eq: $id }) {
      title
      content
      slug
      category {
        title
        slug
      }
    }
  }
`;

Answer 1

您是否尝试过使用自己的渲染组件（components）？

  <ReactMarkdown 
    children={content}
    components={{
      u: ({node, ...props}) => <u style={{textDecoration: 'underline'}} {...props} />
    }}
   className={s.content}
   transformImageUri={uri => uri.startsWith("http") ? uri : `${process.env.GATSBY_IMAGE_BASE_URL}${uri}`} 
  />

有关组件属性的更多详细信息：https ://github.com/remarkjs/react-markdown#appendix-b-components

如果需要，您甚至可以使用自定义样式<p>代替<u>。这个想法依赖于解析<u>标签来添加你自己的下划线组件。

---

显然，需要安装rehype-raw插件才能让 ReactMarkdown 理解和解释带下划线的标签 ( <u>)