Как засунуть React компонент внутрь html разметки из шаблонизатора?

Question

[sergey1998]

Есть заметка на выходе после шаблонизатора, например:

<div>
        <div>
             {{data}}
        </div>
       <span></span>
    </div>

Переменная data заменяется на текст, в итоге можно получить чистый html

И задача теперь туда где span засунуть уже не пользовательский компонент

<div>
        <div>
             Name
        </div>
       <span><Component /></span>
    </div>

На выходе вот так что бы получилось и дальше можно было бы работать

Answer 1

[Владимир]

https://reactjs.org/docs/add-react-to-a-website.html
Только у тебя
<div id="like_button_container"></div>
Это твой span

Comments

[sergey1998]

@Casufi
Не понял:
ReactDOM.render(, span.id );
Это сработает?

[Владимир]

sergey1998, Ну только сначала объявить компонент и да, сработает.
Если нет настроение играться со сборкой компонента то вот пример компонента без JSX

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}