Question

我正在尝试在React组件上捕获一个onclick方法来创建一个React Modal。我已将react-overlay添加为依赖项并将其添加到我的文件中。

import Modal from 'react-overlays';

这是锚元素，

<a href="#" onClick={this.handleClick} data-id={image.id}>

这是handleclick方法，

handleClick(event) {
    event.preventDefault();
    let mediaId = event.currentTarget.attributes['data-id'].value;
    this.setState({ overlay: <Modal show={this.state.showModal} onHide={this.close} mediaId={mediaId}/> });
  }

我收到以下错误，

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.(…)

Answer 1

我最近遇到了这个问题，并通过创建一个模态组件解决了这个问题。

import Modal from 'react-modal'


export default class CustomModal extends React.Component {

    constructor () {
        super();
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.state = {
            open: false
        }
    }

    openModal () { this.setState(
        {open: true});
        $(function(){
            $("#custom-modal").appendTo("body");
        });
    }

    closeModal () {

        this.setState({open: false});
    }

    componentDidMount(){
        $(function(){
            $("#custom-modal").appendTo("body");
        });
    }

    render () {

        return (
            <div>
                <button onClick={this.openModal}>My modal</button>
                <Modal id="custom-modal" isOpen={this.state.open} onRequestClose={this.closeModal}>

                     // Modal body content here

                    <button onClick={this.closeModal}>Close</button>
                </Modal>
            </div>
        );
    }
}

然后像这样使用它：

import CustomModal from '../components/CustomModal'
...
<li><CustomModal/></li>

希望这有任何帮助。

Answer 2

您的州应该包含允许您渲染模态的信息，但不包含模态本身。

将组件存储在州内是非常不寻常的。

试试这个：

在您的州内存储一个标记，以指示是否应显示该模式。
在handleClick()
在render()中，如果设置了标志，则渲染模态。

如果您需要一个例子，请告诉我。

Answer 3

您似乎正在导入undefined ..

另外，请查看https://github.com/fckt/react-layer-stack。这是解决＆＃34;模态问题的通用而简洁的方法。在React。演示 - https://fckt.github.io/react-layer-stack/

Answer 4

如果仍然有人对此有疑问，现代的方法是使用React钩子来构建模式。如下图所示

import React from 'react';
import './modal.css';
import FontAwesome from 'react-fontawesome';

const Modal = (props) => {
  const { closeModal } = props;

  const closeicon = () => (
    <FontAwesome
    name="times"
    onClick={closeModal}
    style={{
      color: '#000000',
      padding: '10px',
      cursor: 'pointer',
      backgroundColor: 'transparent',
      border: 0,
      position: 'absolute',
      top: '0.3rem',
      right: '0.5rem',
    }}
    />
  );

  return (
    <div className="overlay">
      <div className="content">
        { closeicon() }
        {props.children}
      </div>
    </div>
  );
};


export default Modal;

css如下所示

.overlay {
    position: fixed;
    display: block; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); 
    z-index: 999; 
    cursor: pointer;
  }

.content {
        margin: 15% auto;
        background-color: white;
        border-radius: 0.25rem;
        width: 50vw;
        padding: 2rem;
        position: relative;
  }

所以您可以像这样使用模式组件

 const [status, setStatus] = useState(false);

//this button will trigger the modal

<button onClick={() => setStatus(true)}>Open Modal</button>


{
status && (
<Modal closeModal={() => setStatus(false)}><p>hello worls</p></Modal>
         )
}

无需担心响应速度。样式已得到照顾。

有关进一步的说明，您可以检查此链接 https://dev.to/adeyemiadekore2/how-to-build-a-reusable-and-responsive-modal-in-react-from-scratch-1o0f

在React中渲染模态

4 个答案: