流路由器 - 将内容插入 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}。这是否意味着内容是没有参数且输出为空的对象文本？

但是当内容在routes.jsx中传递时，它是（）=>（/Post postId={postId}/>）那么输出Post的内容不是作为道具传递的postId吗？

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

Answer 1

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

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

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

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