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

Posted 2023-02-21

【中文标题】在 ReactJS 上意外使用“开放”无限制全局变量

【英文标题】：Unexpected use of 'open' no-restricted-globals on ReactJS

【发布时间】：2019-01-27 04:12:05

【问题描述】：

我正在使用名为“react-responsive-modal”的模态依赖项。它工作得很好，但是 突然它停下来，出现了一条错误消息：

“open”无限制全局变量的意外使用

引用此代码行时出现此错误消息：

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

【问题讨论】：

准确但我不知道如何解决它

它可能被从状态中解构使用。在render() const open = this.state; return ( ... );

this.state.open

【参考方案1】：

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

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

我认为你最好在你的渲染方法中解构你的状态，比如

const open = this.state

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

或者把渲染方法改成

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