Speed_Racer_promotional_image.jpg
昨天我们通过一个示例，做了一个简单的 Demo。也知道我们可以用 reason 来写 react 组件，reason 提供两种模板让我们来创建组件。
无类型的组件statelessComponent
let component = ReasonReact.statelessComponent("SimpleComponent");
let make = _children => {
...component,
render: _self => <div> (ReasonReact.string("Reason Projects")) </div>,
};
然后我们创建一个 TutData.re 文件，其中定义一个 tut 类型，定义数据的结构。
type tut = {
title:string,
body:string
}
我们创建一个 statessComponent 组件。
let component = ReasonReact.statelessComponent("SimpleComponent");
let make = _children => {
...component,
render: _self => {
<div>
<h1>(ReasonReact.string("Reason Projects")) </h1>
</div>;
},
};
我们在定义一个组件 TutItem，~tut 表示给这个参数打一个标签，虽然我们可调整参数的位置，然后通过标签对参数进行传值。
let component = ReasonReact.statelessComponent("TutItem");
let make =(~tut: TutData.tut, _children) => {
...component,
render: _self => {
//创建数据
<div>
(ReasonReact.string(tut.title))
</div>;
},
};
创建 tut 类型的 dummyTut 的数据，然后将 dummyTut 通过 prop 传入组件。
let component = ReasonReact.statelessComponent("SimpleComponent");
let make = _children => {
...component,
render: _self => {
//创建数据
let dummyTut:TutData.tut = {
title:"angular tut",
body:"angular tut body"
};
<div>
<h1>(ReasonReact.string("Reason Projects")) </h1>
<TutItem tut=dummyTut/>
</div>;
},
};
reason-react.jpeg
