如何使用 react-data-table-component 从 React Table 内部渲染 Modal

Question

我正在尝试从 React 表渲染模态。 使用反应数据表组件

文档在这里

这就是我正在尝试的方式。

// Related part from table
const tableColumns = [
 {
    // name: 'More',
    sortable: false,
    width: '80px',

    selector: (row) => {
      return (
        <div style={{ paddingTop: '80px' }}>
          {' '}
           // Problematic part
          <Button color="primary" onClick={() => <MapModal containerNumber={row.container_number} show={true} />}>
            Show
          </Button>
          <p className="pb-1">
            <MapPin />
          </p>
         
          <p className="pb-1">
            <Link to={`/shipment/${row.id}/`}>
              <Eye />
            </Link>
          </p>
        </div>
      )
    }
  },
]

我要渲染的模态组件。 onClick 事件。

import React, { Fragment } from 'react'
import { Modal, ModalHeader, ModalBody } from 'reactstrap'

const MapModal = ({ containerNumber, show }) => {
  return (
    <Fragment>
      <Modal isOpen={show} className="modal-dialog-centered modal-xl">
        <ModalHeader className="bg-transparent" toggle={() => setShow(!show)}></ModalHeader>
        <ModalBody>
          <iframe
            src={`https:/fakepath/where-is-my-container/${containerNumber}`}
            id="id"
            
          ></iframe>
        </ModalBody>
      </Modal>
    </Fragment>
  )
}

export default MapModal

使用这种方法，我无法触发模态显示，那么我该如何解决这个问题？ 可能是什么问题？

Answer 1

MapModal组件可以与 react datatable 组件处于同一级别， show和container_number变量可以保存到 stateHook 中。

这样，模态也将正确呈现（即使使用动画，因为<Modal>不会被卸载）

const Wrapper = () => {
    const [showModal, setShowModal] = useState(false);
    const [containerNumber, setcontainerNumber] = useState();

    // Related part from table
    const tableColumns = [
        {
            // name: 'More',
            sortable: false,
            width: '80px',

            selector: (row) => {
              return (
                <div style={{ paddingTop: '80px' }}>
                  <Button color="primary" onClick={() => {
                     setcontainerNumber(row.container_number);
                     setshow(true);
                  }}>
                    Show
                  </Button>
                  <p className="pb-1">
                    <MapPin />
                  </p>
         
                  <p className="pb-1">
                    <Link to={`/shipment/${row.id}/`}>
                      <Eye />
                    </Link>
                  </p>
                </div>
              )
            }
          },
        ]

    return <React.fragment>
        <MapModal containerNumber={containerNumber} show={showModal} />
        /* The table component */
        <Datatable columns={tableColumns} />
    </React.fragment>
}