将 React 组件路由到 Rails 部分？

Question

我的 Rails 4.2 应用程序中有一个 React 组件，它被设置为 NewContactForm 到 contact/new，并且以这种方式运行良好。但是，我一直希望将其注入现有的 Rails 页面（listings/new 或 listings/edit，均通过 _form 部分呈现），因为此信息与此相关，以便更好地流动。就目前而言，我的路由要求我有一个将组件渲染到的确切路径；有什么方法可以让我在部分中渲染我的组件吗？我知道这个想法是能够通过应用程序在任何地方注入 React，我只是不确定在这种情况下如何处理路由（除非 views/contacts/new 被转换为部分并传入？）。

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>
}

Answer 1

您似乎将组件内的路由器与此处的 rails 路由器混淆了。

此处指定的路由将处理组件内部的路由。这意味着单击组件内的任何内容都会在组件本身中呈现其他内容，但不会影响您的 rails 服务器提供的路由。

组件需要自己的路由的假设场景是您有一个多步骤表单的组件，并且您正在使用路由器来处理您所在的步骤。

要在局部内部渲染组件，似乎最简单的方法是使用 react-rails 和 react helpers 的组合

1. 将 react-rails gem 添加到您的设置中 gem 'react-rails'

2. 捆绑所有 React 组件，以便它们可供使用。

3. 使用 react_component 助手在你的局部渲染组件：

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