How to transfer props to childs?

1

JS exmaple:

import cx from 'classNames'

const Foo = (props) => (
  <div {...props} className={cx("my-best-class", props.className)} />
)

const App = () => {
  return (
    <main><Foo onClick={...} className={...} id="..." /></main>
  )
}
2

React.CloneElement could be used here. https://rescript-lang.org/docs/react/latest/elements-and-jsx#cloning-elements

1 Like
3

Thanks. I thought that exists syntax similar JS with spreads.

4

So, I checked and I can’t make wrapper for dom elements. I need write makeProps for all domProps…

5

UP! Maybe any ideas?

6

I suspect for type safety you might need to separate React component props and dom props.

It’s not the idea you were hoping for, but would something like this work for you? Separating React props from dom props and using cloneElement as mentioned by @a-c-sreedhar-reddy.

module Foo = {
  @react.component
  let make = (~text: string, ~className: string, ~domProps: ReactDOM.domProps) => {
    let el = <div className={"my-best-class " ++ className}> {text->React.string} </div>
    React.cloneElement(el, domProps)
  }
}

let domProps = ReactDOM.domProps(~id="myid", ~onClick={Js.log}, ())
let el = <Foo text="Hello" className="myclass" domProps={domProps} />
1 Like
7

Sad…I think that need have possibility to merge types like in TS – type C = A & B
Maybe I wrong…

1 Like
8

To me kevanstannard’s solution looks like the better approach. It cleanly separates component props from DOM element props and avoids using potentially expensive object spread.

By the way, ReScript does have type spreading: Object | ReScript Language Manual

But it doesn’t actually work for prop spreading for other reasons.

9

I think that clone element is more expensive than merge two objects

1 Like
10

It cleanly separates component props from DOM element props and avoids using potentially expensive object spread.

11

Could you show me example? I don’t understand how it works.