React Modal不会在加载内容之间关闭

Question

我正在使用这个react模式插件:https://github.com/reactjs/react-modal 我需要在页面加载模式中显示一个对象数组.当第一项显示用户单击按钮时,isOpen prop对于Modal设置为false.每个项目都有一个prop showModal,它将值提供给模态的isOpen.当用户不断点击时,我会继续将当前对象上的值设置为false,然后将其设置为true以用于下一个对象.这一切都很好,但问题是叠加和对话窗口停留在屏幕上,只更新模态中的内容.我希望模态完全关闭并打开以显示数组中下一个对象的内容.我不得不将我的代码删除到下面的简化版本:

class ProductsModal extends React.Component {
  constructor(props) {
    super(props);
    this.remindMeHandler = this.remindMeHandler.bind(this);

    this.state = {
      products: [],
      modalId: 0
    };
  }

showModals() {
    let products = this.state.products;
    //A different function saves the array of product objects in the state so 
    //I can show them one by one

    let currentProduct = products[this.state.popUpId];

    if (products.length > 0) {
      return <ProductItemModal 
              product={currentProduct}
              showNextPopUp={() => this.showNextPopUp(currentProduct.productId)}
              showPopUp={currentProduct['showModal']}
              />;
    //showModal is a boolean for each product that sets the value of isOpen
    }
  }

  showNextPopUp() {
      //All this does is sets the "showModal" property to false for current 
     //product and sets it to true for next product so it shows in the Modal
  }


render() {
    return(
      <div>
        {this.showModals()}
      </div>
    );
  }
}

class ProductItemModal extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <Modal 
        isOpen={this.props.showModal}
        contentLabel="Product"
        id={this.props.product.productId}
        >
        <div>
         Product Data......
        </div>
      </Modal>
    );
  }
}

Answer 1

您需要调用ProductItemModal的setState()来关闭Model。否则，虽然 isOpen 发生变化，但 UI 不会重新渲染。