Question

我正在尝试将函数传递给react路由器中的子组件。我已经想出如何使用渲染来发送我的道具并使用withRouter使它们可用于我当前的状态。

我无法将函数传递给接收它的组件定义的另一个函数。

下面的示例代码 - 有点斩首

// generic class with a router attempting to pass a function to a child
class App extends Component{
...
modalLogin = () => {
    console.log('modal login called')
    this.setState({modalLoginTrigger:true})
}

render(){
   render(
   <router> 
      <switch> 
         <Router ....more paths>  
         <Route path='/product/:_id' render={(props) =>(<ProductPage onModalLogin={this.modalLogin} />)}/>
      </siwtch>
   </router>)

ProductPage - 正确接收所有父道具，但未将addToBinder（）函数连接到this.props.onModalLogin

class ProductPage extends Component {
    addToBinder(){
        this.props.onModalLogin()
    }

    render() {
       <div>
           <a className="cb_binder-link__add-remove col-xs-6" onClick={this.addToBinder} href="#">
       </div>
}
export default withRouter(ProductPage) ;

当我的锚点中的onclick函数被调用时，我得到了一个

TypeError：无法读取undefined的属性'props' 这来自addToBinder（）

当我从渲染本身调用onModalLogin函数时，它可以工作。

class ProductPage extends Component {
    addToBinder(){
        this.props.onModalLogin()
    }

    render() {
       <div>
           <a className="cb_binder-link__add-remove col-xs-6" onClick={this.props.onModalLogin} href="#">
       </div>
}
export default withRouter(ProductPage) ;

我希望能够在调用onModalLogin之前在addToBinder中执行业务逻辑 - 例如检查用户是否已登录，如果没有则提示登录。我该如何连接？

Answer 1

看起来你需要将它绑定到你的addToBinder函数，所以试试： onClick = {（）=＆gt; this.addToBinder（）}或onClick = {this.addToBinder.bind（this）}

或者实际上，看看你如何定义modalLogin，为addToBinder做同样的事情，将其自动绑定到函数，这样你就不必执行上述任何一种方法。这就是为什么当你将this.modalLogin传递给onClick时它会起作用。

Answer 2

事实证明，我需要将onClick绑定到This

class ProductPage extends Component {
   addToBinder(){
      this.props.onModalLogin()
   }   

   render() {
       <div>
           <a  onClick={this.props.onModalLogin.bind(this)} href="#">
       </div>
   }
}

跟进Dal提供的另一个答案，重新定义addToBinder函数，将范围传递给父级。

addToBinder = () => {
    this.props.onModalLogin()
}

这也很干净。

React传递组件功能 - 不能在功能中使用

2 个答案: