如何在 React 組件中使用 ERB？ [導軌 6]

Question

我有一個關於 Rails 6 的項目。
開始使用react-rails將其遷移到 React。 但是，由於時間限制，仍有一些組件無法遷移到 React ATM。

我希望能夠在我的 React 組件中使用舊組件（ partial ）。
例如，假設我有一個 React 組件：

組件.tsx

export const Component = ({post}) => {
    return <div>
      <ShareButton post={post}/>
    </div>
}

並且以某種方式 ShareButton 應該包含以下內容：

<%= render partial: 'posts/shared/share_post_btn', locals: {event: false, post: post} %>

我讀到使用.jsx.erb可能是可能的，但我不知道如何。

很想得到一些見解！ 謝謝你。

Answer 1

恐怕你會在這里混合構建管道。 .erb由資產管道解析，這是 Rails <6 和 CSS 的默認設置，但默認情況下這不再適用於 Rails 6 支持 JS 輸出的基於 yarn/webpacker 的構建（ Rails 7再次選擇新的路徑，對不起）。

此外，由於組件通常帶有附加操作，我真的不明白基於混合 Rails（靜態 HTML）的方法如何工作。

一些想法：

最后，Rails/ERB 和 React 都創建了 HTML。 也許您可以簡單地創建與您的 ShareButton 使用 Rails 創建的相同的 HTML 作為臨時解決方法？ 您將共享來自新前端項目的 CSS，並且可以在 React 中慢慢遷移重建組件（當您考慮構建組件庫時，請確保它與獨立的 HTML/CSS 一起使用）。
你可以使用dangerouslysetinnerhtml在 React 中加載靜態 HTML； 如果您想要在 React 組件中加載復雜的預渲染文本，這可能是一個解決方案。
加載 React 客戶端（相對較慢）； 不會真正為生產執行此操作： How to perform import/export in client-side React JSX using Babel-Standalone
對 React 中收到的 HTML 進行一些解析； 並有條件地渲染組件（這種方法有點像 Rails Turbo 的工作原理；對 React、Vue 等的更原生的 Rails 答案）
Push through：如果你想最終得到一個干凈的 React 版本，上面的“解決方案”都不是真正令人滿意的。
回滾：為什么首先使用 react。 React 只是呈現 HTML 的另一種奇特方式。