React JS-子组件的传递函数

时间:2018-07-22 10:36:36

标签: javascript reactjs

我有一个App组件,其内部有一个函数'modalToggled'。 我想将函数传递给多个子组件,直到到达最后一个“内部”组件。

赞:

<App> -> <Coluna1> -> <MenuPrincipal> -> <Portfolio> -> <PortfolioMenu> -> <interiores>

应用程序组件,所有组件的父级:

import React, { Component } from 'react';
import Coluna1 from './Coluna1'    

class App extends Component {
  constructor(props) {
    super(props)       
    this.state = {
      modalOn: false
    }
   this.modalToggled = this.modalToggled.bind(this)
  }      

  modalToggled = (on) => {
    this.setState({modalOn: on});
  }      

  render() {
    return (
      <div>          
          <Coluna1 onModalToggle={this.modalToggled}/>
      </div>
    )
  }
}

export default App;

这是“ Coluna1”的第一个子组件。我在其他菜单中做了同样的事情:'MenuPrincipal','Portfolio','PortfolioMenu'

class Coluna1 extends Component {
  constructor(props){
    super(props)
  }

  render() {
    return (
      <div>
        <Header />
        <MenuPrincipal onModalToggle={this.props.modalToggled} />
      </div>
    )
  }
}

export default Coluna1

因此这是最后一个组件内部,当我单击按钮时,会出现错误消息:

TypeError:_this.props.onModalToggle不是函数

import React, { Component } from 'react'    
import Modal from 'react-responsive-modal';    


class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {              
      open: false
    }      
  }

  onOpenModal = () => {
    this.setState({ open: true });
    this.props.onModalToggle(true);
  };

  onCloseModal = () => {
    this.setState({ open: false });
    this.props.onModalToggle(false);
  };   

  render() { 
    const { open } = this.state;   
    return (                  
      <div>
          <button onClick={this.onOpenModal}>Open modal</button>
          <Modal open={open} onClose={this.onCloseModal} center></Modal>                    
     </div>
    )
  }
}

export default Interiores;

有人知道如何解决吗?谢谢

2 个答案:

答案 0 :(得分:2)

发生这种情况是因为在App类中,您传递了名称为 onModalToggle 的prop:

avgCost

但是在Coluna1中,您收到的道具名称错误, modalToggled

<Coluna1 onModalToggle={this.modalToggled}/>

只需使道具名称相等即可。在Coluna1和其他中间组件中,以 onModalToggle 传递和接收此道具:

<MenuPrincipal onModalToggle={this.props.modalToggled} />

答案 1 :(得分:0)

这是问题

modalToggled = (on) => {
    this.setState({modalOn: on});
  }

由于这是一个类函数,因此需要像

这样定义
modalToggled(on) {
    this.setState({modalOn: on});
}