FlowRouter - 將內容插入 HTML 模板

Question

我正在嘗試學習流星反應，我有一個關於使用 FlowRouter 將內容插入 HTML 模板頁面的問題。

讓我們假設一切都正確導入，這是相關的代碼：

路由.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} 。 這不是意味着內容是一個沒有參數並輸出空值的對象文字嗎？

但是當內容在 routes.jsx 中傳遞時，它是() => (/Post postId={postId}/>)那么輸出 Post 的內容不是 postId 作為 prop 傳入的嗎？

這與 index.jsx 期望的內容如何匹配？

Answer 1

在您的示例中， content是在兩種情況下都沒有輸入參數的函數文字，它返回一個新的 React 組件。 （ null也是一個有效的 React 組件。）

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

在這種情況下postId不是一個參數，而是一個閉包變量。 當達到代碼的值時，閉包對象會在運行時創建，嵌入postId的值。

在index.jsx你的布局需要一個沒有參數的函數，它返回一個 React 組件，這正是content 。 當您調用content() ，它會創建一個新的Post組件，並將其閉包對象中的postId作為 props 傳遞。