React JS - 调用函数作为道具传递

Question

我正在传递一个函数来处理 React 应用程序中模态 window 组件从父组件到子组件的状态。

父组件

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组件，似乎定义为一个函数，但是调用它会报错。

我在这里错过了什么？

Answer 1

您的构造函数没有绑定到 this 的道具。使用 props 参数访问构造函数中的 props。

constructor(props) {
   super(props);
   console.log(props.modal);
   props.modal(true, 'hello modal');
}

React JS - 调用函数作为道具传递

React JS - Calling function passed as a prop

javascript

reactjs

react-props