无法在React组件中显示从Showdown插件生成的HTML

Question

我正在使用Showdown模块从markdown获得HTML。我想在React组件中显示生成的HTML。我的转换器正在正常工作，生成HTML：<h1 id="typeyourmarkdownbountyhere">Type your markdown bounty here…</h1>

但是我得到了这样的错误信息：Uncaught Error: Target container is not a DOM element.还有其他/更好的方法来显示生成的HTML吗？有人能指出我做错了什么吗？

import { observer } from "mobx-react-lite"
import React from "react"
import * as ReactDOM from 'react-dom';
import Showdown from 'showdown'

import { useStore } from "../store/Provider"

const converter = new Showdown.Converter({
    tables: true,
    simplifiedAutoLink: true,
    strikethrough: true,
    tasklists: true,
})

function Bounties() {
    const store = useStore()

    return (
        store.bounties.map( bounty => (
        <div>
            <h3 key={bounty.id}>{bounty.title}</h3> 
            <div id="bountyBody"></div>
            {ReactDOM.render(converter.makeHtml(bounty.body), document.getElementById('bountyBody')) }
        </div>
        ))
    )
}

export default observer(Bounties)

Answer 1

引发此错误是因为您正在尝试获取对DOM节点的引用，而该节点仍需在DOM本身上呈现。您可以通过使用空的deps数组[]在useEffect中调用useEffect来解决这个问题，这样就可以在第一个呈现之后执行它，但是您会注意到，它无论如何都不会像预期的那样工作，因为它将呈现一个表示HTML代码的字符串，它不会解析它！ReactDOM.render用于将JSX代码附加到DOM节点，而您正在尝试传递一个HTML (这是converter.makeHtml()返回的内容)。所以它永远不会起作用。

一种工作方法是：

• 将标记转换为HTML
• Transpile HTML/JSX，以响应第一级API
• 解析转置代码
• ，将其执行为真正的JSX代码

F 213

这就是一个例子：

import React, { useMemo, useEffect } from 'react';
import Showdown from 'showdown';
const buble = require('buble');

const MarkdownToJSX = ({ md }) => {
  if (typeof md !== 'string') return null;
  const makeComponent = useMemo(() => {
    const converter = new Showdown.Converter({
      tables: true,
      simplifiedAutoLink: true,
      strikethrough: true,
      tasklists: true,
    });
    const html = `<>${converter.makeHtml(md)}</>`;
    const code = buble.transform(html).code;
    const makeComponent = Function('React', 'return ' + code);
    return makeComponent;
  }, [md]);

  return makeComponent(React);
};

检查工作示例https://stackblitz.com/edit/react-32m1ay