Reactjs 如何在react DOM中显示模态框？

我在DOM中显示模态框有一个问题，我有3个组件：Navbar和Modal作为子组件和Shopping作为父组件，我在Shopping中调用Modal和Navbar，我想在Navbar上单击一个跨距时显示模态框，它不能正常工作，你能帮助我吗？ 购物中心是：

class Shopping extends React.Component {
state = {
    products: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
    },
           addCounter: 0,
    purchased: false,
}

addProductHandler = (id, title, price) => {
    // Count
    const prevCount = this.state.addCounter
    const updatedCount = prevCount + 1
    this.setState({ totalPrice: newPrice, addCounter: updatedCount })
}

showModalHandler = () => {
    this.setState({ purchased: true })
}


render() {
    return (
        <Wrapper>
            <Navbar
                counter={this.state.addCounter}
                showModal={this.showModalHandler}
            />
            <Modal show={this.state.purchased} />
            <Control addProduct={this.addProductHandler} />
        </Wrapper>
    )
}

class.Component{
状态={
产品：{
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0,
},
地址计数器：0，
购买：假，
}
addProductHandler=（id、标题、价格）=>{
//计数
const prevCount=this.state.addCounter
const updatedCount=prevCount+1
this.setState（{totalPrice:newPrice，addCounter:updatedCount}）
}
showModalHandler=（）=>{
this.setState（{purchased:true}）
}
render（）{
返回(
)
}

}

导出默认购物

导航条Cod为：

const Navbar = (props) => {
return (
    <header className="header">
        <nav>
            <ul className="nav-items">
                <li className="nav-item"><a href="/">Home</a></li>
                <li className="nav-item"><a href="/">Products</a></li>
                <li className="nav-item"><a href="/">Contact Us</a></li>
            </ul>
        </nav>
        <a href="#"><i className="fas fa-shopping-cart shopping-cart"></i></a>
        <span className="counter" onClick={() => props.showModal}>Orders: {props.counter}</span>
    </header>
)

const导航栏=（道具）=>{
返回(





props.showmodel}>订单：{props.counter}
)

}

导出默认导航栏

模态代码为：

const Modal = (props) => {
return (
    <Wrapper>
        <div className="modal"
            style={{
                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                opacity: props.show ? '1' : '0',
            }}
        >
            <p>Hello Modal</p>
        </div>
    </Wrapper>
)

const模态=（道具）=>{
返回(
你好，莫代尔

)

}

---

导出默认模式未调用showModal函数。 叫它

或

---

使用箭头函数时，必须调用相应的函数。您没有添加函数括号：

onClick={() => props.showModal()}

或者你可以用这两种方法中的任何一种

使用bind（）：

或通过引用：

onClick={props.showModal}

onClick={() => props.showModal()}

onClick={props.showModal.bind(this)}

onClick={props.showModal}