Question

我正在使用一种称为“反应-响应-模态”的模态依赖性。它工作正常，但突然它停下来了，出现了错误信息：

意外使用“开放”无限制全局变量

有关此代码行的以下错误消息：

<Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>

有人知道如何解决吗？谢谢

import React, { Component } from 'react'  
import Modal from 'react-responsive-modal';

class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {        
      open: false
    }
  }

  onOpenModal = () => {
    this.setState({ open: true });     
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };  

  render () {
    return (
      <div>             
        <button onClick={this.onOpenModal}>Open modal</button>

        <Modal open={open}  onClose={this.onCloseModal} onExited={this.onExited} top>
          <div>
            <h2>Simple centered modal</h2>
            <p>Text here</p>
          </div>
        </Modal>
      </div>
    );
  }
}

Answer 1

这是因为open是js中的保留关键字。

http://www.javascripter.net/faq/reserved.htm

我认为您最好在渲染方法中破坏状态，例如

const {open} = this.state

但是考虑到变量的意图，恕我直言，最好将其命名为isOpen:false。

或将render方法更改为

      <Modal 
        open={this.state.open}
        onClose={this.onCloseModal}
        onExited={this.onExited}
        top
      >
        <div>
          <h2>Simple centered modal</h2>
          <p>Text here</p>
        </div>
      </Modal>
    </div>
  );
}

在ReactJS上意外使用'open'无限制全局变量

1 个答案: