ReactJS：显示模态和重新渲染

Question

所以，我试图找出最好的方法来做到这一点：

在反应中显示模态或隐藏模态。在我的主页上，我有很多照片，我当前的状态设置是：

export default class Main extends TrackerReact(Component) {
  constructor(props) {
   super(props);
   this.state = {
     showModal: false,
     modalPhoto: {},
   };

   this.close = this.close.bind(this);
   this.open = this.open.bind(this);
}
close() { this.setState({ showModal: false }); } // basic modal close
open(e) {
  this.setState({ modalPhoto: e });
  this.setState({ showModal: true });
}

当我将 showModal 设置为 true 时，它​​会传递给 bootstrap-react 模式：

<Modal
  show={this.props.show} >
  // ...loads modalPhoto form main state.modalPhoto
</Modal>

问题：每次打开模态时，它都会更改主状态并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么？我试过：

// in the main component
shouldComponentUpdate(nextProps, nextState) {
  if (this.state.showModal !== nextState.showModal) {
    return false;
  } else {
    return true;
  } // PS. I know this is wrong, but I was desperate...

我也在考虑使用 jquery 在外面转来转去并手动显示模态或隐藏模态，从而不改变状态。这样做的问题很明显，Unmount 和 ReceiveProps 很难维护。

我也知道 TrackerReact 包会在数据发生变化时重新渲染，但在模式打开和关闭时不应更改任何数据。

想法？

Answer 1

也许您应该考虑使用组件来包装模式并管理状态。您的主要组件将不再更新。

正如上面评论中所说，状态更新后立即刷新视图是 React 的工作方式

Dan Abramov 在 Stack Overflow 上写了一个非常有趣的答案，关于如何处理具有 redux 状态的 Modals：How can I display a modaldialog in Redux that Performs asynchronous actions?

尝试从这篇文章中获得一些灵感。

希望这可以帮助！