Extensions of Props
Note: This page assumes your
bsconfig.json
to be set to"jsx": { "version": 4 }
to apply the right JSX transformations.
Spread props
JSX props spread is supported now, but in a stricter way than in JS.
Multiple spreads are not allowed:
<NotAllowed {...props1} {...props2} />
The spread must be at the first position, followed by other props:
<NotAllowed a="a" {...props} />
Shared props
You can control the definition of the props
type by passing as argument to @react.component
the body of the type definition of props
. The main application is sharing a single type definition across several components. Here are a few examples:
type sharedprops<'x, 'y> = {x: 'x, y: 'y, z:string}
module C1 = {
@react.component(:sharedProps<'a, 'b>)
let make = (~x, ~y) => React.string(x ++ y ++ z)
}
module C2 = {
@react.component(:sharedProps<string, 'b>)
let make = (~x, ~y) => React.string(x ++ y ++ z)
}
module C3 = {
type myProps = sharedProps<int, int>
@react.component(:myProps)
let make = (~x, ~y) => React.int(x + y)
}
This feature can be used when the nominally different components are passed to the prop of Screen
component in ReScript React Native Navigation.
REStype screenProps = { navigation: navigation, route: route }
module Screen: {
@react.component
let make: (
~name: string,
~component: React.component<screenProps>,
...
) => React.element
}
<Screen
name="SomeScreen"
component={A.make} // This will cause a type check error
...
/>
<Screen
name="SomeScreen"
component={B.make} // This will cause a type check error
...
/>
This example cann't pass the type checker, because the props types of both components are nominally different. You can make the both components having the same props type by passing screenProps
type as argument to @react.component
.
RESmodule A = {
@react.component(:screenProps)
let make = (
~navigation: navigation,
~route: route
) => ...
}
module B = {
@react.component(:screenProps)
let make = (
~navigation: navigation,
~route: route
) => ...
}