动态创建打开相应模式的按钮

Question

我正在尝试动态显示3个分别打开不同模式的按钮。我正在努力寻找解决方案来打开属于按钮的模式。我试图像下面的代码一样实现它。我没想到它无法正常工作，但我正在努力寻找实现所需结果的正确方法。

按钮-模式代码：

export default function SidenavButtons(props) {
    const [modalShow, setModalShow] = React.useState(false);

    return (
        <React.Fragment>

            <a class="dropdown-item" onClick={() => {setModalShow(true)}}>{props.usage}</a>
            {
                if(props.usage === "post" && modalShow){
                    <CreatePostModal
                    show={modalShow}
                    onHide={() => setModalShow(false)}
                    modelUsage={props.usage}
                />
                }
                if(props.usage === "tweet" && modalShow){
                    <CreateTweetModal
                    show={modalShow}
                    onHide={() => setModalShow(false)}
                    modelUsage={props.usage}
                />
                }
                if(props.usage === "tiktok" && modalShow){
                    <CreateTiktokModal
                    show={modalShow}
                    onHide={() => setModalShow(false)}
                    modelUsage={props.usage}
                />
                }
            }


        </React.Fragment>
    )
}

我正在尝试动态显示3个分别打开不同模式的按钮。我正在努力寻找解决方案来打开属于按钮的模式。我试图像...

Answer 1

您的错误是在返回值内使用if语句。您可以只使用表达式本身，如下所示

Answer 2

您对此有何看法：