Как я могу использовать одно и то же приложение React в нескольких местах одной и той же страницы?

Question

Я создал небольшое приложение для калькулятора, используя create-react-app.

На данный момент это локальное автономное приложение, которое я разрабатываю. Моя цель - интегрировать это в существующий серверный веб-сайт.

Мне интересно, на несколько вещей:

1. Как бы я интегрировать это приложение из создать реагирующую-приложение в существующем веб-сайт?
2. Как бы я мог встроить приложение React в multiple местоположений на этой странице?

Когда дело доходит до инициализации приложения на высшем уровне, я сейчас делаю:

render(<App />, document.querySelector('#app')); 

Но это только позволяет мне поместить его в одну область.

Каков наилучший способ иметь несколько приложений? Не имеет значения, не поддерживают ли они одно и то же состояние друг с другом и действуют независимо.

спасибо.

Answer 1

Вы можете просто визуализировать приложение в нескольких контейнерах.

var Hello = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container1') 
); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container2') 
); 

Здесь example