How can I use a ReactComponent as a Layout ?

if i write yield like this in application.html.slim , the other components will render out of the layout component

doctype html
html
  head
    title
      | Quiver
    = javascript_pack_tag 'application'
    = csrf_meta_tags
body
  = react_component('ApplicationLayout',{logo: asset_path('logo'))
  = yield 

Here is the description with a picture .

so ,is anybody can teach me how to do that? thanks … 😦

[qxchen6]

I didn’t describe it clearly . The requirements and descriptions are :

• The project I’m developing is not a Single-Page-Application .
• I am not using the react-router .
• All page-jumping-actions managed by Rails but web-pages are rendered by React .
• I hope to write a layout in application.html.slim .
• I hope that it is a REACT COMPONENT not SIMPLE HTML .
• Above is because that I’m using AntDesign .
• I want to write Layout using AntDesign (That’s why the Layout must be a REACT COMPONENT in my project).

It’s something like this :

In application.html.slim .

body
  // If there is some helper can supply a yield in component .
  // For example , there is a helper named react_component_with_yield .
  
  = react_component_with_yield 'AppLayoutComponent' 
  

In Rails Controller FooController.rb

class FooController < ApplicationController 
    def bar
        @component_data = [];
    end
end

In app/views/foos/bar.html.slim：

= react_component 'BarComponent'

And the Component looks like :

AppLayout.js

... ...
import { Layout } from 'antd'
const {Content , Header ,Sider } = Layout

const AppLayout = () => {
    return(
        <Layout>
            <Header>
                header
            </Header>
            <Layout>
            <Sider/>
            <Content>
                // I want BarComponent to be here .
                // I know is wired but it's the only way i could thinkout
                // for example , there is a flag called rails_yield
                
                rails_yield
                
                // every slim-page where react_component helper is called will insert here .
                // repeat once again ,  i know it's wired ,but how can i make the Layout in application.html.slim to be a Component ?
            </Content>
            </Layout>
        </Layout>
    )
}

If i use the way u suggest , like :

body
  header 
    | this is header
  section
    = yield

It means that the layout is simple HTML TAGS but not react components . Also means that I can not use AntDesign’s Layout components … 😦

Or . I have to import AppLayout Components in every Component Like This :

... ...
import AppLayout from './AppLayout'

const BarComponent = () => {
    return (
        <AppLayout>
            <div>
                bar bar bar 
            </div>
        </AppLayout>
    )
}

😦

Maybe it is the problem of my project-structure-design . It’s a very old and large project , hard to refactor .

I think U are right . The react-rails gem is simple and easy to use . I have tried the rails_on_react , it’s too complex for me .

I will keep importing AppLayout Components in every Component to keep development schedule until I find A better way . Or refactor the structure-design .

Thanks .

[rystraum]

@qxchen6

“Simplest” though definitely not best practice:

Create a layout ReactComponent which renders passed in HTML in a prop as dangerouslySetInnerHTML.

Again, not best practice.

= react_component("ReactLayout", content: yield)

class ReactLayout extends React.Component {
  render() {
    return <div dangerouslySetInnerHTML={{ _html: this.props.content }}>
    </div>
  }
}

---

On second thought, yield might not work as is. If it doesn’t try render_to_string(partial: "yield") then have a app/views/application/_yield.html.erb which just contains yield.