如何在React组件中使用ERB ?Rails[6]

Question

我有一个关于Rails 6的项目。
开始使用react-rails迁移到React。但是，由于时间限制，仍然有一些组件无法迁移到React ATM。

我希望能够在我的React组件中使用旧组件(partial)。
e。假设我有一个React组件:

Component.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青睐的基于yarn/webpacker的构建(Rails 7再次选择新路径，我很抱歉)，这不再默认工作。

此外，由于组件通常附加了操作，我真的不明白基于混合Rails(静态HTML)的方法如何工作。

一些想法:

• 最后，Rails/ERB和React都创建HTML。也许你可以简单地创建相同的HTML，你的ShareButton创建Rails作为一个临时的解决方案?你可以分享来自新前端项目的CSS，并且你可以慢慢地在React中迁移重建组件(当你考虑构建组件库时，请确保它与独立的HTML/CSS一起工作)。
• 你可以加载静态HTML使用dangerouslysetinnerhtml反应;如果你想在React组件中加载复杂的预渲染文本，这可能是一个解决方案。
• 加载React客户端(相对较慢);如何使用Babel-Standalone在客户端React JSX中执行导入/导出
• 对React中收到的HTML进行一些解析;并有条件地渲染组件(这种方法有点像Rails Turbo的工作原理;对React、Vue等的更原生rails的回答)
• Push through:如果你想要一个干净的React版本，上面的"解决方案"都不是真正令人满意的。
回滚:为什么首先要使用react ?React只是渲染HTML的另一种奇特方式。