React bootstrap 重复的模态组件

Question

出于某种原因，模态框渲染了不止一次，有时是 2 次或 3 次。然后，几秒钟后，附加模态框会自动删除。

模式是通过路由打开的，所以我正在做这样的事情：

const ModalWrapper = (props) => {
  return (
    <Modal
      show={props.showModal}
      onHide={props.hide}
    >
    ...
    </Modal>
  );
};

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

    this.state = {
      showModal: true,
    };
  }

  @autobind
  closeModal() {
    this.props.history.goBack();
    this.setState({showModal: false});
  }

  render() {
    return (
      <ModalWrapper
        {...this.state}
        hide={this.closeModal}
      />
    );
  }
}

Answer 1

我遇到了同样的问题，我在 GitHub 上打开了一个问题： https://github.com/react-bootstrap/react-bootstrap/issues/2730

Answer 2

通常这种情况发生在模态框位于包装器内时，例如：

const ChildrenWrapper = ({children}) => {
  return <div>{children}</div>
}

模态框是包装器中的子项：

const ModalWrapped= ({}) => {
return <ChildrenWrapper>
            <Modal show={true}>some content</Modal>
       </ChildrenWrapper>
}

比应用程序：

const App = () => {
   return <ModalWrapped/>
}

结果是Modal的实例在虚拟中渲染了2次dom。

React bootstrap 重复的模态组件

React bootstrap duplicated modal components

javascript

bootstrap-modal

reactjs

react-bootstrap