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

【问题标题】：Unexpected use of 'open' no-restricted-globals on ReactJS在 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

标签： javascript reactjs

【解决方案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>
  );
}

【讨论】：