我有一个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;
有人知道如何解决吗?谢谢
答案 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});
}