reagent-project/reagent

How can i render component as componets'props

shengdoushi opened this issue · 2 comments

shengdoushi commented

For example, antd's List's (https://ant.design/components/list/) header and footer can be a component, how can i write in reagent:

  <List
      header={<div>Header</div>}
      footer={<div>Footer</div>}
/>
Deraen commented

Their API gives the parameter type as ReactNode which should mean React Element nodes.

You can convert Reagent Hiccup form to React elements using as-element function.

[:> antd/List
 {:header (r/as-element [:div "Header"])
  :footer (r/as-element [:div "Footer"])}]

https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs#L169-L175

(If you need components, youd use r/reactify-component.)

  • 👍2
shengdoushi commented

thanks

Their API gives the parameter type as ReactNode which should mean React Element nodes.

You can convert Reagent Hiccup form to React elements using as-element function.

[:> antd/List
 {:header (r/as-element [:div "Header"])
  :footer (r/as-element [:div "Footer"])}]

https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs#L169-L175

(If you need components, youd use r/reactify-component.)