reason-react

How to compose props across component in reason-react bindings?

梦想的初衷 提交于 2021-02-07 20:22:08
问题 I am currently writing a material-UI reason-react binding and I want to know how I can re-use previously define Props. The Select component spreads all of the Input props into itself, in the underlying react-js lib. this is done by spreading props however this is discouraged in ReasonML as typings are lost. As a temporary solution, I have copied the props from one to another but this is not scalable. I would appreciate if someone could suggest what is the correct way of doing this in Reason

Can I make Reason+React import react module from CDN?

淺唱寂寞╮ 提交于 2021-02-05 09:15:27
问题 Building a component with Reason and React always gives me an module import statement for "react", which cannot be found if React is included from a CDN. Is there a solution for this? I've tried to define window.react = React in index.html without success. es6-global setting does not change anything. I'm not using a bundling program like webpack. Edit: Possibly relevant thread from Reason forum: https://reasonml.chat/t/can-one-load-reasonml-es6-modules-without-a-bundler/2219 Similar issue

Unbound record field name in Reason Component

我只是一个虾纸丫 提交于 2020-01-05 04:24:09
问题 Borrowing just about all of Yawar's helpful answer, I have the following: $cat src/index.re let products = [| {name: "Football", price: 49.99}, {name: "Basebll", price: 1.99}, {name: "Poker", price: 33.99} |]; ReactDOMRe.renderToElementWithId( <ProductTable products /> ); $cat src/productRow.re let component = ReasonReact.statelessComponent("ProductRow"); let echo = ReasonReact.stringToElement; let make = (~name: string, ~price: float, _) => { ...component, render: (_) => { <tr> <td>{echo

How to conditionally set HTML attributes in JSX using reason-react?

此生再无相见时 提交于 2020-01-04 06:50:14
问题 I want to render an HTML checkbox whose checked state is controlled by data. Give a stateless component that receives an item type { label: string, checked: bool} , Like so: let component = ReasonReact.statelessComponent("TodoItem"); let make = (~item, _children) => { render: _self => { <li> <input type_="checkbox" {/*looking for something like this*/ item.checked ? "checked" : "" /* doesn't compile */}/> {ReasonReact.string(item.label)} </li> } } How do I add the presence of the attribute

How to add a copyright symbol in reason-react component?

喜夏-厌秋 提交于 2020-01-03 16:45:01
问题 I’m new to reason-react. I’m trying to put a copyright symbol in a react-reason component. I've tried <span >(ReasonReact.stringToElement("©"))</span> but this doesn’t give me the © symbol. 回答1: It's also possible, and usually simpler, to just use the unicode character: let copy = ReasonReact.stringToElement({js|\u00a9|js}); // Since ReasonReact 0.7.0 you can use let copy = React.string({js|\u00a9|js}); Or even shorter: let copy = [%raw {|'\u00a9'|}]; It's also possible to use unicode

How to bind to and use a higher-order component in ReasonReact

与世无争的帅哥 提交于 2020-01-01 12:17:32
问题 Let's say I have a higher-order component, something like the following trivial definition, exported from the JavaScript module ./hoc.js : export const withStrong = Component => props => <strong> <Component ...props/> </strong> Assuming I have some component called HelloMessage , what is the equivalent of this piece of JavaScript: import { withStrong } from './hoc.js'; const HelloMessage = ... const StrongMessage = withStrong(HelloMessage); ReactDOM.render( <StrongMessage name="Joe" />,

How to extend JS class in ReasonML

佐手、 提交于 2019-12-23 12:28:52
问题 For example, I have an es6 -like class: class Foo {...} And I want to extend it: class Bar extends Foo {...} In reason-react documentation I found examples, but I'm not sure that it's appropriate for me: let component = ReasonReact.reducerComponent "TodoAppRe"; let make _children => { ...component, initialState: fun () => {count: 0}, <...> But when i try to write code in this style, i get an error: let myclass unit => { ...mysuperclass, hello: fun () => { Js.log "FooBar"; } }; Error: Unbound

Passing React Component to Another Component?

南楼画角 提交于 2019-12-10 11:37:01
问题 I'm trying to define a ProductRow and ProductCategoryRow from Thinking in React. productRow.re let component = ReasonReact.statelessComponent("ProductRow"); let make = (~name, ~price, _children) => { ...component, render: (_self) => { <tr> <td>{ReasonReact.stringToElement(name)}</td> <td>{ReasonReact.stringToElement(price)}</td> </tr> } }; productCategoryRow.re let component = ReasonReact.statelessComponent("ProductCategoryRow"); let make = (~title: string, ~productRows, _children) => { ..

How to bind to and use a higher-order component in ReasonReact

廉价感情. 提交于 2019-12-04 09:44:00
Let's say I have a higher-order component, something like the following trivial definition, exported from the JavaScript module ./hoc.js : export const withStrong = Component => props => <strong> <Component ...props/> </strong> Assuming I have some component called HelloMessage , what is the equivalent of this piece of JavaScript: import { withStrong } from './hoc.js'; const HelloMessage = ... const StrongMessage = withStrong(HelloMessage); ReactDOM.render( <StrongMessage name="Joe" />, document.getElementById('react-app') ); TL;DR: This should be the exact equivalent of the requested