Question

Main.js应用程序中有一个Modal组件，我想从其他组件（在本例中为Homepage，但每个页面只有一个组件）触发它。

我不知道如何在模态中传递要渲染的组件。如果有帮助，我正在使用上下文API。

App.js

const App = () => {
    return (
        <div>this is the main app</div>
        <Modal />
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

Modal.js

class Modal extends Component {

    constructor(props) {
        super(props)
        this.state = {
            'open': false
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({open: nextProps.open})
    }

    render() {

        if (!this.state.open) {
            return false
        }

        return(
            <div className="modal">
                {this.props.children}
            </div>
        )

    }
}

export default Modal

Homepage.js

class Homepage extends Component {

    constructor(props) {
        super(props)
        this.handleOpenModal = this.handleOpenModal.bind(this)
    }

    handleOpenModal() {
        // here I want to open the modal and pass the <ModalContent /> component
        // basically call the <Modal open="true"> from the Main component
    }

    render() {
        return(
            <div className="homepage">
                <button onClick={this.handleOpenModal}>open the modal</button>
            </div>
        )
    }
}

const ModalContent = () => {

    return(
        <div>this is the content I want to render inside the modal</div>
    )

}

谢谢。

Answer 1

我强烈建议您使用Call Payable_Total_Net('2018-01-01','2018-12-31',@totalNet); SELECT @totalNet;（npm）之类的东西。它使您可以将模式内容保留在触发器旁边。它是通过在DOM的高处附加一个“门户”来实现的，并处理将内容附加到is上。

您的示例可能如下所示：

react-modal

反应：从其他组件打开模态

1 个答案: