1

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

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

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

4

1 回答 1

1

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

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

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

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

于 2016-04-24T13:21:46.500 回答