React获取并显示Rails中的附加文件

可以通过以下步骤实现：

首先，确保Rails后端已经配置好了文件上传功能。可以使用CarrierWave或Active Storage等Gem来处理文件上传。具体配置方法可以参考相关文档或教程。
在React前端中，可以使用Axios或Fetch等库来发送HTTP请求到Rails后端，以获取附加文件的URL或数据。
在React组件中，可以使用fetch或axios等库发送GET请求到Rails后端的API接口，获取附加文件的URL或数据。例如：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FileComponent = () => {
  const [fileUrl, setFileUrl] = useState('');

  useEffect(() => {
    const fetchFile = async () => {
      try {
        const response = await axios.get('/api/files/1'); // 根据实际情况修改API接口路径和参数
        const { url } = response.data; // 假设后端返回的数据中包含文件的URL
        setFileUrl(url);
      } catch (error) {
        console.error(error);
      }
    };

    fetchFile();
  }, []);

  return (
    <div>
      {fileUrl && <img src={fileUrl} alt="附加文件" />} // 假设是图片文件
    </div>
  );
};

export default FileComponent;

在Rails后端中，需要创建一个API接口来处理文件的获取请求。可以使用Rails的路由和控制器来实现。例如：

# routes.rb
Rails.application.routes.draw do
  namespace :api do
    resources :files, only: [:show] # 根据实际情况修改路由路径和请求方法
  end
end

# files_controller.rb
class Api::FilesController < ApplicationController
  def show
    file = File.find(params[:id]) # 根据实际情况获取文件对象
    render json: { url: file.url } # 假设文件对象有一个url属性，存储文件的URL
  end
end

以上代码示例中，React组件通过发送GET请求到/api/files/1接口获取文件的URL，并将URL保存在组件的状态中。然后，根据文件的URL在React组件中显示附加文件。

注意：以上示例仅为演示目的，实际情况中需要根据具体需求进行适当的修改和调整。