javascript - 将自定义参数传递给react-router onEnter函数

Question

通常在react-router路由的输入函数上看起来有点类似于:

const isLoggedIn = (nextState, replace, callback) => {
  /* Some checks / redirects here */
}

我们在 Route 中使用它，就像这样

<Route onEnter={isLoggedIn} />

我试图传递自定义参数，但没有运气，本质上我想实现这样的目标

<Route onEnter={isLoggedIn(myParam)} />

并且能够在函数中访问它，所以

const isLoggedIn = (myParam, nextState, replace, callback) => {
  /* Some checks / redirects here */
}

Answer 1

您可以使用上下文绑定(bind)来完成此操作。 当您从 React Router 中调用该函数时，只需在您的 auth 函数中绑定(bind)您需要的数据。您也可以通过这种方式传递对象。 您的代码如下所示:

function requireAuth(nextState, replace) {
   console.log(this.loggedIn)
}

<Route onEnter={requireAuth.bind({"loggeIn":this.props.loggedIn})} />

如果您使用 ECMAScript 6，另一个选项是使用函数参数:

var requireAuth=(loggedIn)=>{
   return (nextState,replace)=>{
     console.log(loggedIn)
   }
}

<Route onEnter={requireAuth(this.props.loggedIn)} />

它的工作时间应该更短:

var requireAuth=(loggedIn)=>(nextState,replace)=>{
     console.log(loggedIn)
}

<Route onEnter={requireAuth(this.props.loggedIn)} />