Блог

У меня есть компонент React в моем приложении Rails 4.2, который настраивается как NewContactForm сквозной contact/new и прекрасно работает таким образом сам по себе. Тем не менее, я хотел внедрить его в существующую страницу Rails ( listings/new или listings/edit , обе отображаются через _form partial), с которой связана эта информация, для улучшения потока. В нынешнем виде моя маршрутизация требует, чтобы у меня был точный путь для рендеринга компонента; есть ли у меня какой-либо способ рендеринга моего компонента в partial? Я знаю, что идея состоит в том, чтобы иметь возможность внедрять React куда угодно с помощью приложения, я просто не уверен, как маршрутизация обрабатывается в этой ситуации (если views/contacts/new не преобразуется в partial и не передается в?).

app.jsx:

 import React from 'react'
import { Switch, Route } from 'react-router-dom'
import WarehouseReport from './reports/warehouse'
import NewContactForm from './contacts/new-contact-form'

export default function App() {
  return <Switch>
    <Route exact path='/:account_id/warehouses/:warehouse_id/warehouse_report' component={ WarehouseReport }/>
    <Route exact path='/:account_id/contacts/new' component={ NewContactForm }/>
  </Switch>
}
  

Кажется, вы путаете маршрутизатор внутри вашего компонента с маршрутизатором rails здесь.

Указанная здесь маршрутизация будет обрабатывать маршруты внутри самого компонента. Это означает, что нажатие на что-либо внутри компонента отобразит что-то еще в самом компоненте, но не повлияет на маршрут, предоставляемый вашим rails-сервером.

Гипотетический сценарий, в котором компоненту потребуются его собственные маршруты, заключается в том, что у вас есть компонент, представляющий собой многоступенчатую форму, и вы используете router для обработки того, на каком шаге вы находитесь.

Для рендеринга компонента внутри самого partial, кажется, самый простой способ сделать это — использовать комбинацию react-rails и react helpers

1. Добавьте драгоценный камень react-rails в свою настройку gem 'react-rails'

2. Объедините все компоненты React, чтобы они стали доступны для использования.

3. Используйте помощник react_component для рендеринга компонента внутри вашего partial:

   <%= react_component('ComponentName', {prerender: true}) %>