Làm cách nào để hiển thị nhận xét HTML trong React?

Question

Hiện tại, phương thức hiển thị chỉ có thể trả về một phần tử/thành phần. Xem: here

Trong các cuộc thảo luận dưới vé là một số gợi ý để quấn nhiều yếu tố trở về từ một thành phần Phản ứng trong một chú thích HTML để các thành phần gói bị bỏ qua bởi trình duyệt, ví dụ:

<A> 
    <B></B> 
    <Fragment> 
     <C></C> 
     <D></D> 
    </Fragment> 
    <E></E> 
</A> 

sẽ làm cho đến:

<a> 
    <b></b> 
    <!--<fragment data-reactid="">--> 
     <c></c> 
     <d></d> 
    <!--</fragment>--> 
    <e></e> 
</a> 

Nhưng làm cách nào để tạo thành phần chỉ hiển thị nhận xét HTML? Nói cách khác, hàm render của thành phần 'fragment' trong ví dụ trên có thể trông như thế nào?

Answer 1

Đây là những gì tôi đã kết thúc với một trong các dự án gần đây của tôi:

import React, {Component, PropTypes} from 'react'; 
import ReactDOM from 'react-dom'; 

class ReactComment extends Component { 
    static propTypes = { 
     text: PropTypes.string, 
     trim: PropTypes.bool 
    }; 

    static defaultProps = { 
     trim: true 
    }; 

    componentDidMount() { 
     let el = ReactDOM.findDOMNode(this); 
     ReactDOM.unmountComponentAtNode(el); 
     el.outerHTML = this.createComment(); 
    } 

    createComment() { 
     let text = this.props.text; 

     if (this.props.trim) { 
      text = text.trim(); 
     } 

     return `<!-- ${text} -->`; 
    } 

    render() { 
     return <div />; 
    } 
} 

export default ReactComment; 

Vì vậy, bạn có thể sử dụng nó như thế này:

<A> 
    <B></B> 
    <ReactComment text="<fragment>" /> 
     <C></C> 
     <D></D> 
    <ReactComment text="</fragment>" /> 
    <E></E> 
</A> 

Answer 2

Cách bạn đang có kế hoạch để làm won này 't làm việc với một giải pháp phản ứng vani đơn giản. Tuy nhiên, bạn có thể xác định thành phần web tùy chỉnh chuyển đổi thành nhận xét HTML và trả về từ trong trình bao bọc React. Một thành phần ví dụ được thực hiện here. Để sử dụng trong React, hãy tham khảo this url.

Cập nhật 19/01/2017

Vì vậy, đây là lý thuyết chưa được kiểm tra, nhưng các thành phần web có thể là một cái gì đó giống như -

`` `

/** 
* <react-comment-sentinel> Web Component 
* 
* @usage 
* <react-comment-sentinel sentinel="fragment"><div>Hello there!</div></react-comment-sentinel> 

* @result 
* <!-- <fragment> --><div>Hello there!</div><!-- </fragment> --> 
*/ 
var proto = Object.create(HTMLElement.prototype, { 
name: { get: function() { return 'React HTML Comment'; } }, 
createdCallback: { value: function() { 

    /** 
    * Firefox fix, is="null" prevents attachedCallback 
    * @link https://github.com/WebReflection/document-register-element/issues/22 
    */ 
    this.is = ''; 
    this.removeAttribute('is'); 
} }, 
attachedCallback: { value: function() { 
    var tag = this.attributes("sentinel"); 
    this.outerHTML = '<!-- <' + tag + '> -->' + this.innerHtml + '<!-- </' + tag + '> -->'; 
} } 
}); 
document.registerElement('react-comment-sentinel', { prototype: proto }); 

` ``

Lưu ý rằng các con bên trong là html thuần túy, không phải React. Tuy nhiên, bạn cũng có thể thử nghiệm với việc tăng cường mã lên support React Components.

Answer 3

Sử dụng dấu ngoặc nhọn, sao cho bạn có thể sử dụng nhận xét javascript /* */.

<a> 
    <b></b> 
    {/*<fragment data-reactid="">*/} 
     <c></c> 
     <d></d> 
    {/*</fragment>*/} 
    <e></e> 
</a>