Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- ----------------------------------------------------------------------
- Jinja Macro with simple Call
- ----------------------------------------------------------------------
- {% macro render_dialog(title, class='dialog') -%}
- <div class="{{ class }}">
- <h2>{{ title }}</h2>
- <div class="contents">
- {{ caller() }}
- </div>
- </div>
- {%- endmacro %}
- {% call render_dialog('Hello World') %}
- This is a simple dialog rendered by using a macro and
- a call block.
- {% endcall %}
- */
- // Equivalent with renderProps
- import React from "react";
- import ReactDOM from "react-dom";
- const A = props => (
- <div className={props.className}>
- <h2>Render Props</h2>
- <div class="contents">{props.children()}</div>
- </div>
- );
- const App = () => (
- <A className="app-block">{() => <div>{`I'm rendered`}</div>}</A>
- );
- const rootElement = document.getElementById("root");
- ReactDOM.render(<App />, rootElement);
- /**
- ----------------------------------------------------------------------
- Jinja Macro call block can be used with arguments
- ----------------------------------------------------------------------
- {% macro dump_users(users) -%}
- <ul>
- {%- for user in users %}
- <li><p>{{ user.username|e }}</p>{{ caller(user) }}</li>
- {%- endfor %}
- </ul>
- {%- endmacro %}
- {% call(user) dump_users(list_of_user) %}
- <dl>
- <dl>Realname</dl>
- <dd>{{ user.realname|e }}</dd>
- <dl>Description</dl>
- <dd>{{ user.description }}</dd>
- </dl>
- {% endcall %}
- */
- // Equivalent with renderProps
- import React from "react";
- import ReactDOM from "react-dom";
- const users = [{ name: "John" }, { name: "Doe" }];
- const A = ({ className, users, children }) => (
- <div className={className} users={users}>
- <h2>Render Props</h2>
- <div class="contents">{users.map(user => children(user))}</div>
- </div>
- );
- const App = () => (
- <A className="app-block" users={users}>
- {user => <div key={user.name}>{`${user.name} is rendered`}</div>}
- </A>
- );
- const rootElement = document.getElementById("root");
- ReactDOM.render(<App />, rootElement);
Add Comment
Please, Sign In to add comment