React Markdown处理BBCode：从非标准标记到HTML的转换指南

[img]{STEAM_CLAN_IMAGE}/3703047/17e3e74c5f323f431ec172c81940e81ad52588b3.jpg[/img]

[h2]The Arlington Major[/h2]
The Summer Tour of the DPC draws to a close.

Head over to the [url=www.dota2.com/battlereport]full update website[/url] for all the details.

import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; // 支持GitHub Flavored Markdown (GFM)
import rehypeRaw from 'rehype-raw'; // 允许解析和渲染原始 HTML

// 这是一个假设的 BBCode 到 Markdown 转换函数。
// 在实际项目中，你会引入一个成熟的 BBCode 转换库，例如：
// import bbcodeToMarkdown from 'some-bbcode-to-markdown-library';
const convertBbcodeToMarkdown = (bbcodeText) => {
    let markdown = bbcodeText;

    // 示例转换规则：
    // 将 [h2]...[/h2] 转换为 Markdown 的 ##
    markdown = markdown.replace(/[h2](.*?)[/h2]/g, '## $1');

    // 将 [url=...]...[/url] 转换为 Markdown 的 []()
    markdown = markdown.replace(/[url=(.*?)](.*?)[/url]/g, '[$2]($1)');

    // 将 [img]{STEAM_CLAN_IMAGE}/path/to/image.jpg[/img] 转换为 Markdown 的 ![]()
    // 注意：这里的图片URL转换是基于示例数据中的特定格式。
    // 实际应用中需要根据 BBCode 的具体实现来构建正确的图片 URL。
    markdown = markdown.replace(/[img]{STEAM_CLAN_IMAGE}/(.*?).jpg[/img]/g, '![Image](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/clans/$1.jpg)');

    // 替换所有 '\n' 为实际的换行符 '
'，确保 Markdown 正确解析段落
    markdown = markdown.replace(/\n/g, '
');

    return markdown;
};

/**
 * 一个用于渲染包含 BBCode 内容的 React 组件。
 * 它会在内部将 BBCode 转换为 Markdown，然后使用 ReactMarkdown 渲染。
 * @param {object} props
 * @param {string} props.bbcodeContent 包含 BBCode 标记的原始文本。
 */
function NewsContentRenderer({ bbcodeContent }) {
    const [markdownContent, setMarkdownContent] = useState('');

    useEffect(() => {
        if (bbcodeContent) {
            const convertedText = convertBbcodeToMarkdown(bbcodeContent);
            setMarkdownContent(convertedText);
        }
    }, [bbcodeContent]);

    return (
        <div className="news-article-container">
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                rehypePlugins={[rehypeRaw]}
                // components 属性可用于进一步自定义渲染特定的 HTML 元素。
                // 例如，如果你想将所有 h2 标签渲染为带有特定样式的 p 标签，可以这样做：
                // components={{ h2: ({node, ...props}) => <p className="custom-heading" {...props} /> }}
            >
                {markdownContent}
            </ReactMarkdown>
        </div>
    );
}

// 示例用法：
const sampleBbcodeText = `[img]{STEAM_CLAN_IMAGE}/3703047/17e3e74c5f323f431ec172c81940e81ad52588b3.jpg[/img]\n\n[h2]The Arlington Major[/h2]\nThe Summer Tour of the DPC draws to a close.\n\nHead over to the [url=www.dota2.com/battlereport]full update website[/url] for all the details.`;

// 在你的应用中，你可以这样使用 NewsContentRenderer：
// <NewsContentRenderer bbcodeContent={sampleBbcodeText} />