0

我正在尝试使用 react 和marked.js 构建一个简单的降价预览器。感觉就像我快到了 - 我可以 console.log 降价，但由于某种原因，我在尝试插入 HTML 时遇到错误。这是代码：

//import { useState } from 'react';
const {useState} = React

//MAIN APP
function App(){
  const [text, setText]=useState("Test")

  function editorHandler(event){
    setText(event.target.value)
  }


  return( 
  <div>
      <h1> MARKDOWN PREVIEWER </h1>
      <Editor onChange={editorHandler} markDown={text}/>
      <Preview previewText={text}/>
  </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("App"))


// EDITOR COMPONENT
function Editor(props){
  return(
  <div className="window">
    <h2>editor</h2>
    <textarea id="editor" value={props.markDown} onChange={props.onChange} placeHolder="Write something here"> </textarea>
  </div>
  )
}

// PREVIEW COMPONENT
function Preview(props){


 console.log(marked(props.previewText))  // works, outputs: <p>Test</p>

  function getMarkDownText() {
    const rawMarkup = marked(props.previewText)
    return {__html: rawMarkup};
  } 

  return(
  <div className="window">
      <h2>previewer</h2>
      <div id="preview" dangerouslySetInnerHTML={getMarkDownText()}> </div>
    </div>
  )
}

问题似乎出在最后一个 div （id 预览）上。我收到以下不是很有帮助的错误消息：“Uncaught Invariant Violation: Minified React error #60”

如果更简单，Codepen 就在这里：https ://codepen.io/rpollock03/pen/RwWvYQb?editors=1011

感谢您解释我做错了什么。如果这是愚蠢的事情，我正在学习 React 非常抱歉！我试过阅读文档——我认为标记的.js 不是很清楚。

4

1 回答 1

1

代替

 <div id="preview" dangerouslySetInnerHTML={getMarkDownText()}> </div>

和

 <div id="preview" dangerouslySetInnerHTML={getMarkDownText()} />

这将解决它。

Codepen 使用缩小的 react-dom (react-dom.production.min.js)。因此，您没有清楚地看到错误。在 React 的最小化生产构建中，它们避免发送完整的错误消息，以减少通过网络发送的字节数。

但是如果你打开浏览器控制台，你会发现下面的信息

Invariant Violation：最小化 React 错误 #60；访问 https://reactjs.org/docs/error-decoder.html?invariant=60获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

一旦您转到上述消息中的链接，您将收到实际错误，即

只能设置children或之一props.dangerouslySetInnerHTML。

由于在使用 dangerouslySetInnerHTML 时不允许（也不需要）孩子，为了解决这个问题，我们通过替换为移除了<div> </div>孩子<div/>

于 2020-05-24T16:31:49.287 回答