3

Есть необходимость обернуть определенный компонент (не просто строку!!!) в комментарии настоящие html комментарии 

<!--googleoff: all--><!--noindex--> <Component /> <!--/noindex--><!--googleon: all-->

конструкция типа 

<Fragment dangerouslySetInnerHTML={{ html: `<!--googleoff: all--><!--noindex-->` }} />

не работает

Виталий А
  • 31

1 Answers1

1

Просто так не получится. Можно создать отдельный реакт-компонент для коментариев:

/*
  Usage (I however think that the code is self explanatory)

  <ReactComment text={`
      Very long comment with html link
      <a href="https://gist.github.com/alexeychikk/bfe72a072a9a962f2da900b6151e4aae">Star me :)</a>
  `} />
*/

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;

В коде вызывать:

<div>
    <ReactComment text={`googleoff: all`} />
    <ReactComment text={`noindex`} />

    <Component /> <!--/noindex--><!--googleon: all-->

    <ReactComment text={`/noindex`} />
    <ReactComment text={`googleon: all`} />
</div>

Источник: https://gist.github.com/alexeychikk/bfe72a072a9a962f2da900b6151e4aae

Dmitry Kozlov
  • 6,698
  • эти комменты нужно отдавать в теле готовой разметки (для поисковых систем), получившейся при серверном рендеринге, при выполнении которого нет componentDidMount – Виталий А Aug 19 '18 at 11:25
  • 1
    @ВиталийА в любом реакт-компоненте выполнится componentDidMount, даже если рендер происходит на стороне сервера – Dmitry Kozlov Aug 20 '18 at 07:18
  • Ага, выполнится, только в браузере, а комменты нужны в разметке , отдаваемой с сервера поисковикам – Виталий А Aug 21 '18 at 15:08
  • Если поисковики не выполняют js, то у вас не отрендерится вообще ничего реактовского, будет пустой div))) И нет смысла в вопросе вообще. Это если рендер в браузере. Соответственно я предположил, что у вас рендер на сервере. – Dmitry Kozlov Aug 21 '18 at 15:25
  • А может лучше renderer допиливать? 2. Потенциальная дыра, если в this.props.text встретится -->. 3. С обновлением props тоже фигня.
    • – Qwertiy Jan 09 '20 at 12:08