Javascript React JS-为子组件传递函数

我有一个应用程序组件和一个函数“modalToggled”在它的内部。 我想将函数传递给多个子组件，直到到达最后一个“Interiors”组件

像这样：

<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;

import React，{Component}来自'React'；
从“/Coluna1”导入Coluna1
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
莫达隆：错
}
this.modalToggled=this.modalToggled.bind（this）
}      
modalToggled=（打开）=>{
this.setState（{modalOn:on}）；
}      
render（）{
返回(
)
}
}
导出默认应用程序；

这是第一个子组件“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

类Coluna1扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}
导出默认Coluna1

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

TypeError:\u 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;

import React，{Component}来自“React”
从“反应响应模态”导入模态；
类内部扩展组件{
建造师（道具）{
超级（道具）
this.state={
开放：假
}      
}
onOpenModal=（）=>{
this.setState（{open:true}）；
this.props.onModalToggle（true）；
};
onCloseModal=（）=>{
this.setState（{open:false}）；
this.props.onModalToggle（false）；
};   
render（）{
const{open}=this.state；
报税表（
开放模态
)
}
}
导出默认内部；

有人知道怎么解决吗？谢谢

这就是问题所在

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

因为这是一个类函数，所以需要像

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

这就是问题所在

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

因为这是一个类函数，所以需要像

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

---

这种情况会发生，因为在应用程序类中，您在模式切换上传递名为的道具：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

但在Coluna1中，您收到的道具名称错误，modalToggled：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

只要让道具的名字相等就行了。在Coluna1和其他中间组件中，此道具作为模式切换传递和接收：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

---

之所以会发生这种情况，是因为在应用程序类中，您在模式切换上传递名为的道具：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

但在Coluna1中，您收到的道具名称错误，modalToggled：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

只要让道具的名字相等就行了。在Coluna1和其他中间组件中，此道具作为模式切换传递和接收：

<Coluna1 onModalToggle={this.modalToggled}/>

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

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

谢谢，但是现在出现了另一条错误消息：TypeError:无法读取未定义onOpenModal C:/Users/claudio/Desktop/maurobitar_2018/src/Interiors.js:17 14 | 15 | 16 | onOpenModal（）{>17 | this.setState（{open true}）；18 | this.props.onModalTogle（true）；19}；20 | View compiled当我更改时出现最后一条错误消息：onOpenModal=（）=>{this.setState（{open:true}）；this.props.onModalToggle（true）；}；to:onOpenModal{this.setState（{open:true}）；this.props.onModalTogle（true）；}；当我只更改了建议修改的行时，它仍然显示相同的错误消息谢谢，但是现在出现了另一个错误消息：TypeError:无法读取未定义onOpenModal C的属性“setState”：/Users/claudio/Desktop/maurobitar_2018/src/Interiors.js:17 14 | 15 | 16 | onOpenModal（）{>17 | this.setState({open:true}）；18 | this.props.onmodaltogle（true）；19 |}；20 | View compiled当我更改时出现最后一条错误消息：onOpenModal=（）=>{this.setState（{open:true}）；this.props.onmodaltogle（true）；}；to:onopen this.setState（{open:true}）；this.props.onmodaltogle（true）}；当我只更改了建议更改的行时，它仍然显示相同的错误消息