如何从 strapi 文章中获取文本下划线到我的 gatsby 前端

Question

我正在使用 strapi（后端）和 gatsbyjs/react（前端）开发支持站点。我正在尝试从我的管理员 strapi 中检索我加下划线的文本并将其显示在我的前端，但它没有正确检索标签，而是显示标签而不是带下划线的文本。是因为我的react-markdown吗？

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

这是我的代码：

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

如果需要，您甚至可以使用 custom-styled <p> 而不是 <u>。这个想法依赖于解析 <u> 标签来添加你自己的带下划线的组件。

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

如何从 strapi 文章中获取文本下划线到我的 gatsby 前端

how to get the text-underline from strapi articles to my gatsby frontend

html

reactjs

strapi

gatsby

react-markdown