如何使用rehype-react？自定义p标签组件失效问题求助

安全阿岳

2026-7-26

问题分析与解决

首先明确：rehype-react目前仍在维护，你使用的版本组合（unified 10.1.2 + rehype-react 7.1.2）是兼容的，问题出在代码逻辑上，而非包停更。

核心错误点

错误获取处理结果
你用file.toString()输出结果，但rehype-react处理后生成的是React元素，而非HTML字符串。file.toString()是unified默认的文件序列化方法，无法正确解析React元素，自然看不到预期的红色文本p标签。正确的做法是通过file.result获取生成的React元素。
自定义组件未接收Props
你的MyParagraph组件没有接收children和其他属性，导致原p标签的内容无法传递，且组件逻辑固定，无法适配动态内容。实际使用中需要接收props来保留原标签的信息。

修正后的代码示例

import { renderToString } from 'react-dom/server';
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeReact from 'rehype-react';
import React, { createElement } from 'react';

// 修正自定义组件，接收children和其他props
function MyParagraph({ children, ...props }) {
  return (
    <p className='text-red-700' {...props}>
      {children}
    </p>
  );
}

const text = '<p>测试文本</p>';

unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeReact, { 
    createElement, 
    components: { p: MyParagraph }
    // passNode: true 若不需要接收hast节点可移除
  })
  .process(text)
  .then((file) => {
    // 方式1：直接获取React元素，用于React组件内渲染
    console.log(file.result);
    // 方式2：转为HTML字符串输出查看效果
    console.log(renderToString(file.result));
  });