There is a need to wrap a specific component (not just a string !!!) in the comments real html comments

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

type design

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

does not work

  • Google google still doesn't have any googleoff - andreymal

1 answer 1

It just won't work out. You can create a separate reactant component for comments:

 /* 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;

In the code call:

 <div> <ReactComment text={`googleoff: all`} /> <ReactComment text={`noindex`} /> <Component /> <!--/noindex--><!--googleon: all--> <ReactComment text={`/noindex`} /> <ReactComment text={`googleon: all`} /> </div>

Source: https://gist.github.com/alexeychikk/bfe72a072a9a962f2da900b6151e4aae

  • These comments need to be given in the body of the finished markup (for search engines), resulting in server rendering, which does not have componentDidMount - Vitaly A
  • @VitaliyA in any react-component componentDidMount will be executed, even if the render occurs on the server side - Dmitry Kozlov
  • Aha, it will be executed only in the browser, and the comments are needed in the markup sent from the server to search engines - Vitaly A
  • If search engines do not perform js, then you will not render anything at all reactive, there will be an empty div))) And there is no point in the question at all. This is if the render in the browser. Accordingly, I assumed that you have a render on the server. - Dmitry Kozlov