[英]React JS - Calling function passed as a prop
我正在傳遞一個函數來處理模態窗口組件的狀態,從父組件到 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
組件,似乎被定義為一個函數,但是調用它會拋出錯誤。
我在這里缺少什么?
您的構造函數沒有綁定到this
道具。 使用 props 參數訪問構造函數中的 props。
constructor(props) {
super(props);
console.log(props.modal);
props.modal(true, 'hello modal');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.