javascript - 使用字符串作为reactDOM.render、marked.js 和 babel 的输入

Question

所以我尝试使用 React、babel 和 Marked.js 构建一个 git markdown 预览器。 Marked.js 是一个 Markdown 解析器。

假设我想从 html 中使用一个值。

<div id="markdownInput"># This is my input</div>

在 JavaScript 中，我将其存储为变量 myInput。

var myInput = document.getElementById("markdownInput").value;

myInput 现在是“#这是我的输入”并且是一个字符串。 Marked.js 使用名为“marked()”的函数，该函数将字符串作为输入并将 git markdown 转换为 html。

var myOutput = marked(myInput);

myOutput 现在等于:

"<h1>This is my input</h1>"

请注意，markdown 已转换 (# =>h1)，但它也存储为字符串。如果我尝试将其与reactDOM.render一起使用，如下所示:

ReactDOM.render(myOutput, document.getElementById("output-container"));

我的 HTML 中的“输出容器”最终显示:

<h1>This is my input</h1>

而不是用大标题字母显示“这是我的输入”。归根结底，React.DOM.render() 需要一个对象作为输入，而不是字符串。它需要:

<h1>This is my input</h1>

作为一个对象，但我将其作为字符串输入，因为标记()函数仅输出为字符串(它将所有内容都用引号括起来)。

我可以做些什么来将 myOutput 转换为对象吗？我非常了解 React，所以也许我还没有学到更好的方法来处理这样的事情。

谢谢

Answer 1

嗯，找到了这个Using marked in react并使用了“dangerouslySetInnerHTML”属性。也许有更好的方法来做到这一点吗？