Question

我有一个应用程序，在IE9中，似乎没有在状态更改时正确呈现。几乎只是一个产品网格，当你点击一个对象时，它应弹出一个模态框，其中包含一些产品信息以及将项目添加到购物车的功能。现在，网格渲染，当点击一个对象时，只显示模态叠加，但从不加载模态内容。这适用于所有其他浏览器。此外，这在IE9开发控制台打开时也能正常工作。

以下是我们如何做到这一点：

var Modal = React.createClass({
    propTypes: {
    modalOpen: React.PropTypes.bool.isRequired,
    children: React.PropTypes.element.isRequired,
    onClose: React.PropTypes.func
  },
    render: function() {
    if (this.props.modalOpen) {
        return (
        <div>
          <div className="modal-overlay" onClick={this.props.onClose} />
          <div className="modal-content">
            {this.props.children}
          </div>
        </div>
      )
    }
    else {
        return (<div />)
    }    
  }
});

var ProductModal = React.createClass({
    propTypes: {
    modalOpen: React.PropTypes.bool.isRequired,
    onClose: React.PropTypes.func
  },
    render: function() {
    return(
      <Modal modalOpen={this.props.modalOpen} onClose={this.props.onClose}>
        <div className="pdModal">
          This is where product details would go if we had them...
        </div>
      </Modal>
    );
  }
});

var ProductGrid = React.createClass({
        getInitialState: function() {
        return {
        modalIsOpen: false
      }
    },

    openModal: function() {
        this.setState({
        modalIsOpen: true
      });
    },

    closeModal: function() {
        this.setState({
        modalIsOpen: false
      });
    },

    render: function() {
        return (
            <div>
            <div onClick={this.openModal}>CLICK ME TO OPEN THE MODAL</div>
            <ProductModal modalOpen={this.state.modalIsOpen} onClose={this.closeModal} />
          </div>
        );
    }
});

ReactDOM.render(
    <ProductGrid/>,
    document.getElementById('container')
);

Fiddle available here.是的我知道小提琴适用于IE9，这更奇怪，因为这正是我们网站上实现的方式。唯一的区别是我们正在制作ajax请求并在渲染之前等待结果。

有什么想法吗？

ReactJS IE9状态未刷新

0 个答案: