FlowRouter - HTMLテンプレートにコンテンツを挿入する

Question

流星反応を覚えようとしていますが、FlowRouterを使用してHTMLテンプレートページにコンテンツを挿入する方法について質問があります。

これは、関連するコードである、のは、すべてが正しくインポートされると仮定しましょう：

routes.jsx

FlowRouter.route('/post/:postId', { 
    name: 'posts.single', 
    action({postId}) { 
    mount(MainLayoutCtx, { 
     content:() => (<Post postId={postId}/>) 
    }); 
    } 
}); 

index.jsx - MainLayoutCtxが

const Layout = ({content =() => null }) => (
    //code here 
); 

を指しています

index.jsx、{content =（）=> null}。これは、コンテンツがパラメータを持たずnullを出力するオブジェクトリテラルであることを意味しないのでしょうか？

コンテンツがroutes.jsxで渡されているとき、（）= /（投稿ポストID {ポストID} />）ポストIDが小道具として渡されたポストを出力するコンテンツはありませんか？

これは、index.jsxが期待しているものとどのように一致しますか？

Answer 1

例では、contentは、両方の場合に入力パラメータを持たない関数リテラルであり、新しいReactコンポーネントを返します。 （nullも、コンポーネントを有効反応させている。）

content:() => (<Post postId={postId}/>) 

この場合postIdパラメータが、クロージャ変数はありません。クロージャオブジェクトは、コードに達したときにpostIdの値を埋め込んで作成されたランタイムを取得します。

index.jsxのレイアウトでは、Reactコンポーネントを返すパラメータを持たない関数が必要です。これはまさにcontentです。 content()を呼び出すと、新しいPostコンポーネントが作成され、そのクロージャーオブジェクトのpostIdが小道具として渡されます。