Question

我编写了一个名为TocGenerator的组件，该组件根据在this.props.children中传递给它的内容中的h2标签自动生成目录。

示例：

render(){
   return(
      <TocGenerator>
         <h2>First header</h2>
         <p>Some text</p>
         <h2>Second header</h2>
         <p>Some text</p>
         <h2>Third header</h2>
         <p>Some text</p>
      </TocGenerator>
   );
}

产地：

第一个标题
第二个标题
第三个标题

第一个标题

一些文字

第二个标题

一些文字

第三个标题

一些文字

问题在于，如果我将一个将markdown转换为html的组件传递给它，那么它不起作用。降价仍然会转换为html，但不会生成目录。

示例：

render(){
   return(
      <TocGenerator>
         <ReactMarkdown source={contentInMarkdownThatWillBecomeHtml} />;
      </TocGenerator>
   );
}

我认为这与Reactjs渲染组件的方式有关，而且我误解了这个过程。我一直认为这种情况下的组件会先渲染并返回一些html。这个html然后将被发送到并成为this.props.children，它将被分析并最终生成一个目录。

我可以以某种方式确保在发送之前返回了html吗？（因为它是第三方，我无法改变ReactMarkdown）。

Answer 1

所以React传递的是React Components，而不是HTML。但是，您可以使用ReactDOMServer.renderToStaticMarkup(element)从组件中获取呈现的HTML。然后你可以遍历输出，你的代码应该正常工作。应该看起来像这样：

render() {
    const html = ReactDOMServer.renderToStaticMarkup(this.props.children);
    // Now do something with html
    return ...
}

Answer 2

您可以使用react-html-parser库将HTML解析为React。 ReactMarkdown可能不是降价解析器的最佳选择，因为它没有达到你期望的效果。

我建议您使用markdown-it生成HTML，然后将其提供给ReactHTMLParser。

import ReactHtmlParser from 'react-html-parser'
import MarkDownIt from 'markdown-it'

const md = MarkDownIt();

...

render() {
  const { markdownContent } = this.props;
  const html = md(markdownContent)
  return (
    <TocGenerator>{ReactHtmlParser(html)}</TocGenerator>
  }
}

Reactjs将渲染输出发送到包装组件

第一个标题

第二个标题

第三个标题

2 个答案: