极速开发 React — Reason 3

Speed_Racer_promotional_image.jpg

昨天我们通过一个示例，做了一个简单的 Demo。也知道我们可以用 reason 来写 react 组件，reason 提供两种模板让我们来创建组件。

无类型的组件statelessComponent

let component = ReasonReact.statelessComponent("SimpleComponent");
let make = _children => {
    ...component,
    render: _self => 
 (ReasonReact.string("Reason Projects")) 
,
  };

然后我们创建一个 TutData.re 文件，其中定义一个 tut 类型，定义数据的结构。

type tut = {
    title:string,
    body:string
}

我们创建一个 statessComponent 组件。

let component = ReasonReact.statelessComponent("SimpleComponent");
let make = _children => {
    ...component,
    render: _self => {
        
        
 
            
(ReasonReact.string("Reason Projects")) 
        
;
    },
};

我们在定义一个组件 TutItem，~tut 表示给这个参数打一个标签，虽然我们可调整参数的位置，然后通过标签对参数进行传值。

let component = ReasonReact.statelessComponent("TutItem");
let make =(~tut: TutData.tut, _children) => {
    ...component,
    render: _self => {
        //创建数据
       
        
 
            (ReasonReact.string(tut.title))
        
;
    },
};

创建 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"
        };
        
 
            
(ReasonReact.string("Reason Projects")) 
            
        
;
    },
};

reason-react.jpeg