时间戳

首页 > 解决方案 > 如何在 HTML（文章正文）中嵌入反应组件？

html - 如何在 HTML（文章正文）中嵌入反应组件？

问题描述

我正在使用 react 开发一个博客，文章正文作为 HTML（数百篇文章）保存在数据库中，所以我基本上获取数据并使用<div dangerouslySetInnerHTML={{ __html: data.body}}></div>.

<Slider />在客户想要在文章正文中间显示一个或任何其他组件之前，这还不错。

我目前的做法是：

  1. 编辑可以[slider][/slider]在文章正文的任何​​部分键入代码

  2. 在前端，我将每个代码替换为对应的组件

 function ReplaceCodesWithComponents({body}) {

  return body.replace(/\[.+?\]\[\/\w+?\]/g, (code) => {

    // code=[slider][/slider]
    let extractedType = code.match(/(?<=\[\/)\w+(?=\])/g);
  
    if (!extractedType) {
      return code;
    }

    // ["slider"]
    extractedType = extractedType[0];

    // "slider"
    switch (extractedType) {
      case "slider":
        return <Slider />;   // this doesn't work 
      case "products":
        return <Products />;  // this doesn't work 
      case "gallery":
        return <Gallery />;  // this doesn't work  
      default:
        return "";
    }
  });
}

我怎样才能实现这样的目标？或者这甚至是一个好方法？

如果这是一个好方法，那么在将文章保存在数据库中时执行这个过程是否好？还是每次用户访问文章时执行它？

标签： htmlreactjsblogs

解决方案

推荐阅读