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 =（）=＆gt;空} 的。这是不是意味着内容是一个没有参数并输出null的对象文字？

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

这与index.jsx的预期相符如何？

Answer 1

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

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

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

在index.jsx中，您的布局需要一个没有参数的函数来返回一个React组件，而这正是content的内容。当您致电content()时，它会创建一个新的Post组件，并将postId作为道具传递给其闭包对象。

FlowRouter - 将内容插入HTML模板

1 个答案: