FlowRouter - 将内容插入 HTML 模板

Question

我正在尝试学习 meteor-react，我对使用 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}。这不是说 content 是一个没有参数并且输出 null 的对象字面量吗？

但是当在 routes.jsx 中传递内容时，它是 () => (/Post postId={postId}/>) 所以不是输出 Post 的内容不是作为 prop 传入的 postId 吗？

这与 index.jsx 的预期如何匹配？

Answer 1

在您的示例中，content 是一个在两种情况下都没有输入参数的函数文字，并且它 returns 是一个新的 React 组件。（null 也是一个有效的 React 组件。）

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

在这种情况下postId不是一个参数，而是一个闭包变量。当代码达到 postId 时，闭包对象会在运行时嵌入 postId 的值。

在 index.jsx 中，您的布局需要一个没有参数的函数，returns 一个 React 组件，而这正是 content 是什么。当你调用 content() 时，它会创建一个新的 Post 组件，并将 postId 作为 props 从它的闭包对象传递。

FlowRouter - 将内容插入 HTML 模板

FlowRouter - Inserting content to HTML template

javascript

meteor

reactjs

flow-router

kadira