如何将haml与react js集成。我想使用Haml文件渲染react组件？答案

【问题标题】：how to integrate haml with react js.i want to render react component using Haml file?如何将haml与react js集成。我想使用Haml文件渲染react组件？
【发布时间】：2019-05-14 08:35:35
【问题描述】：

我想在 Haml 文件中渲染 React 组件。有没有办法从 Haml 文件中调用 React JS 类进行渲染。

【问题讨论】：

标签： ruby-on-rails ruby reactjs haml manageiq

【解决方案1】：

我认为这是不可能的，因为 React 组件需要 React 应用程序才能工作，但是您可以使用 webpack 的 haml-jsx-loader 实现相反的（反应内部的 haml）。这是演示：

render() {
   return (~
    #content
      .column.sidebar
        %Sidebar(property={value}
               onSelect={() => ...})

      .column.main
        %h2 Welcome to our site!
        %p {info}
   ~);
}

【讨论】：

【解决方案2】：

您的问题上有一个“ManageIQ”标签，所以我假设您是在 ManageIQ UI 的上下文中提问的。

有一个名为 react 的辅助方法允许您在 ManageIQ HAML 中使用 React 组件。在这里实现：https://github.com/ManageIQ/manageiq-ui-classic/blob/master/app/helpers/reactjs_helper.rb

调用示例：

= react 'ReportDataTable', {:reportResultId => @report_result_id}

要做到这一点，您需要在此处注册您的 React 组件：https://github.com/ManageIQ/manageiq-ui-classic/blob/master/app/javascript/packs/component-definitions-common.js

您还可以在此处查看已注册的组件列表和grep 的使用示例。

如果您想在 ManageIQ UI 中的 React 中编写表单，请使用本指南：https://github.com/ManageIQ/guides/blob/master/ui/react_forms.md

【讨论】：