it-swarm.com.ru

Как сделать HTML-комментарий в React?

В настоящее время метод рендеринга может возвращать только один элемент/компонент. Смотрите: здесь

В обсуждении под этим тикетом некоторые предлагают обернуть несколько элементов, возвращаемых компонентом React, в HTML-комментарий так, чтобы компонент обтекания игнорировался браузером, например:

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

будет оказывать:

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

Но как на самом деле создать компонент, который отображает только HTML-комментарий? Другими словами, как может выглядеть функция рендеринга компонента 'фрагмент' в приведенном выше примере?

13
Amiramix

Вот чем я закончил в одном из моих недавних проектов:

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;

Так что вы можете использовать это так:

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

То, как вы планируете это сделать, не будет работать с простым решением Vanilla React. Однако вы можете определить пользовательский веб-компонент, который преобразуется в комментарии HTML и возвращает его из оболочки React. Пример компонента реализован здесь . Для использования в React, обратитесь к этот URL .

Обновление 19/01/2017

Так что это непроверенная теория, но веб-компонент может быть что-то вроде

/**
 * `<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> -->
   ```
 */
class CommentSentinel extends HTMLElement {
  get name() {
    return 'React HTML Comment';
  }

  createdCallback() {
    /**
     * Firefox fix, is="null" prevents attachedCallback
     * @link https://github.com/WebReflection/document-register-element/issues/22
     */
    this.is = '';
    this.removeAttribute('is');
  }

  attachedCallback() {
    const tag = this.getAttribute('sentinel');

    this.outerHTML = `
      <!-- <${tag}> -->
        ${this.innerHTML}
      <!-- </${tag}> -->
    `;
  }
}

document.registerElement('react-comment-sentinel', CommentSentinel);

Обратите внимание, что внутренние дочерние элементы являются обычным html, а не React. Тем не менее, вы можете поэкспериментировать с улучшением кода для поддержки React Components тоже.

0
hazardous