React JS -调用作为属性传递的函数
React JS -调用作为属性传递的函数
提问于 2018-09-11 03:15:20
在React应用程序中，我将一个函数从父组件传递到子组件，以处理模式窗口组件的状态。
父组件
class App extends Component {
constructor() {
super();
this.state = {
'modalVisibility' : false,
'modalContent' : ""
}
this.handleModal = this.handleModal.bind(this);
}
handleModal(visibility, content, innerClass){
this.setState({
modalVisibility: visibility,
modalContent: content ? content : null,
modalClass: innerClass ? innerClass : null
});
}
render() {
return (
<div>
<Modal show={this.state.modalVisibility} content={this.state.modalContent} />
<Content modal={this.handleModal} />
</div>
)
}
}子组件
class Content extends Component {
constructor(props) {
super(props);
console.log(this.props.modal); // Object { modal: handleModal() }
this.props.modal(true,"hello modal"); // TypeError: _this.props.modal is not a function
}
}函数handleModal()看起来像是成功地传递给了Content组件，并且似乎被定义为一个函数，但是调用它会抛出一个错误。
这里我漏掉了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-11 03:18:57
您的构造函数没有绑定到this的属性。使用props参数访问构造函数中的props。
constructor(props) {
super(props);
console.log(props.modal);
props.modal(true, 'hello modal');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52264116
复制相关文章
相似问题