React中从PureComponent调用Component模态框显示异常求助

别担心，你遇到的问题和混合使用PureComponent/Component、TSX/JS文件完全没关系——这两种组合在React里都是完全支持的！你的问题其实是两个小细节导致的：

1. 拼写错误导致模态框无法关闭 #

你在TSX里渲染<AddModal>的时候，把onHide写成了onHIde（注意字母I是大写的）：

// 错误写法
<AddModal show={this.state.addModalShow} onHIde={this.addModalClose} />

而你的AddModal组件里，关闭按钮绑定的是this.props.onHide：

<Button onClick={this.props.onHide}>Close</Button>

因为属性名不匹配，点击关闭按钮根本不会触发addModalClose方法，所以模态框会一直显示在页面上，看起来就是“直接覆盖在原组件上方”关不掉。把拼写改过来就行：

// 正确写法
<AddModal show={this.state.addModalShow} onHide={this.addModalClose} />

2. 确保组件render方法的结构正确 #

从你贴的TSX片段看，渲染部分没有包裹在render()方法里，也没有用单个根元素（比如<div>或者<React.Fragment>）包裹多个子元素。React要求组件的render方法必须返回单个元素（或者用Fragment包裹多个元素），所以你的App组件render部分应该写成这样：

render() {
  return (
    <div className="app-content">
      <Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
      <AddModal show={this.state.addModalShow} onHide={this.addModalClose} />
    </div>
  );
}

如果没有这个根元素，React会抛出错误，可能影响组件的正常渲染。

解决这两个问题之后，模态框应该就能正常打开和关闭了。至于你担心的PureComponent和Component混用、TSX与JS组件互导的问题，完全不用在意——React对这些场景的支持非常好，不会引发这类显示/交互问题。

内容的提问来源于stack exchange，提问作者Harel Yacovian