时间戳

首页 > 解决方案 > 将 React 组件路由到 Rails 部分？

reactjs - 将 React 组件路由到 Rails 部分？

问题描述

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

应用程序.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>
}

标签： reactjsreact-routerruby-on-rails-4.2partials

解决方案

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

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

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

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

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

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

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

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

推荐阅读