React 动态创建打开相应 modal 的按钮

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>
    )
}

Answer 1

您的错误是在 return 中使用 if 语句。 您可以像下面这样使用表达式本身

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

    return (
        <React.Fragment>

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

        </React.Fragment>
    )
}

Answer 2

你怎么看待这件事：

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

    return (
        <React.Fragment>
            <a class="dropdown-item" onClick={() => {setModalShow(true)}}>{props.usage}</a>
            {modalShow && (
              <Modal onHide={() => setModalShow(false)} show>
                {props.usage === 'post' && (
                  // Put here the content that would go inside CreatePostModal
                )}
                {props.usage === 'tweet' && (
                  // Put here the content that would go inside CreateTweetModal
                )}
                {props.usage === 'tiktok' && (
                  // Put here the content that would go inside CreateTiktokModal
                )}
              </Modal>
            )}
        </React.Fragment>
    )
}

Modal 元素看起来像这样：

export default function Modal(props) {
  return <React.Fragment>
    {props.show && (
      <div className="modal-class-name">
        //Here I use props.children to render everything that is rendered inside 
        //the modal
        {props.children}
        <button onClick={props.onHide}>Close</button>
      </div>
    )}
  </React.Fragment>
}

我喜欢这种方法，因为它将关注点分开。 有一个Modal组件处理在 Modal 上显示内容，还有一个SidenavButton组件使用Modal根据使用情况在模态中呈现内容。

最后，简单提醒一下：

if(props.usage === "tiktok" && modalShow){
    <CreateTiktokModal
      show={modalShow}
      onHide={() => setModalShow(false)}
      modelUsage={props.usage}
    />
}

不会呈现任何内容，因为您只能将值放在括号内，而不是实际的 javascript 代码，正确的实现是：

{
  (props.usage === "tiktok" && modalShow) && (
    <CreateTiktokModal
      show={modalShow}
      onHide={() => setModalShow(false)}
      modelUsage={props.usage}
    />
  )
}