Meteor,React-Router,react-komposer - 传递参数

时间:2016-09-30 18:55:45

标签: reactjs meteor react-router

如何使用react-router和react-kompose访问容器中的查询参数:

我这样打,但它不起作用:

routes.js

...

Meteor.startup(() => {
      render(
        <Router history={ browserHistory }>
          <Route path="/" component={ App }>

            <IndexRoute name="index" component={ Index } onEnter={ requireAuth } />
            <Route name="documents" path="/documents" component={ Documents } onEnter={ requireAuth } />

            <Route name="list-projects" path="/list-projects" component={ Projects } onEnter={ requireAuth } />
            <Route name="add-project" path="/add-project" component={ AddProjectPage } onEnter={ requireAuth } />
            <Route name="project-detail" path="/project/:projectId" component={ProjectDetailPage} onEnter={ requireAuth } />


            <Route name="login" path="/login" component={ Login } />
            <Route name="recover-password" path="/recover-password" component={ RecoverPassword } />
            <Route name="reset-password" path="/reset-password/:token" component={ ResetPassword } />
            <Route name="signup" path="/signup" component={ Signup } />
            <Route path="*" component={ NotFound } />

          </Route>
        </Router>,
        document.getElementById('react-root')
      );
    });

container1.js

import { composeWithTracker } from 'react-komposer';
import { Projects } from '../../api/projects/projects.js';
import { ProjectDetail } from '../components/project-detail.js';
import { Loading } from '../components/loading.js';
import { Meteor } from 'meteor/meteor';
const composer = (params, onData) => {
  const subscription = Meteor.subscribe('projects');
  if (subscription.ready()) {
   const project = Projects.find({_id:params._id}).fetch();
    onData(null, { project});
  }
};
export default composeWithTracker(composer, Loading)(ProjectDetail);

1 个答案:

答案 0 :(得分:0)

你现在可能已经知道了,但你可以像这样在容器的道具内获取参数,使用你的例子稍微修改一下:

assert ({ 
  val r1 : Int = constant5 ()
  val r2 : Int = constant5 ()
  (r1, r2)
} === (5, 5)
)

assert ({ 
  val k1 : () => Int = constant (1)
  val k2 : () => Int = constant (2)
  val r1 : Int = k1 ()
  val r2 : Int = k1 ()
  val r3 : Int = k2 ()
  val r4 : Int = k2 ()
  val r5 : Int = k2 ()
  val r6 : Int = k1 ()
  (r1, r2, r3, r4, r5, r6)
} === (1, 1, 2, 2, 2, 1)
)

React Router会将所有内容传递给其子组件。 const composer = (props, onData) => { const subscription = Meteor.subscribe('projects'); if (subscription.ready()) { const project = Projects.find({_id:props.params.projectId}).fetch(); onData(null, { project}); } }; export default composeWithTracker(composer, Loading)(ProjectDetail); 是一个对象,因此您只需获取props的值即可访问参数。您可以根据需要访问容器内的更多内容。