Sử dụng được đánh dấu phản ứng

Question

Tôi muốn sử dụng được đánh dấu trong reactjs như được mô tả trong reactjs docs.

<div>{marked(mystring)}</div> 

tôi sử dụng babel để tôi nhập khẩu đánh dấu như thế này:

import { marked } from 'marked'; 

Đáng tiếc là báo cáo kết quả nhập khẩu không hoạt động. được đánh dấu không được xác định. Làm cách nào để nhập được đánh dấu ở đây, để tôi có thể sử dụng?

Answer 1

Dưới đây là một cách để sử dụng marked với React:

1. Đảm bảo rằng bạn đã cài đặt react-marked
2. Bao gồm marked trong tập tin package.json của dự án của bạn:

"dependencies": { 
    "react": "^0.13.3", 
    "marked": "^0.3.5" 
}, 

3. Nhập marked trongcủa bạn(hoặc liên quan) file:

import marked from 'marked'; 

4. Sử dụng cách tiếp cận dangerouslySetInnerHTML mô tả trong tutorial7.js example in the React Tutorial(như ghi nhận của Janaka), hoặc như thể hiện trong ví dụ dưới đây:

import React from 'react'; 
import marked from 'marked'; 

class MarkdownExample extends React.Component { 
    getMarkdownText() { 
    var rawMarkup = marked('This is _Markdown_.', {sanitize: true}); 
    return { __html: rawMarkup }; 
    } 
  render() { 
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} /> 
  } 
} 

Như đã thảo luận trong React Tutorial, sử dụng thuộc tính dangerouslySetInnerHTML mang đến cho bạn ab ility để làm việc với đánh dấu (HTML) thô. Tuy nhiên, hãy đảm bảo là take care when using this attribute!

---

Lưu ý: cách tiếp cận React.Component trong ví dụ mã trong Bước 4 được dựa trên Agnew của "Hello World" example và ghi chú từ React.Component vs React.createClass bài viết này bằng Goel và Silveira.