極速開發 React — Reason 3

昨天我們通過一個示例，做了一個簡單的 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>;
    },
};