React bootstrap复制的模态组件

Question

出于某种原因，模态被渲染多次，有时是2或3.然后，几秒钟后，aditionals模态将被自动删除。

模态是通过一条路线打开的，所以我做了这样的事情：

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

通常，当Modal位于包装器内时会发生这种情况，例如：

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

模态是包装器中的一个子项：

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

比App：

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

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

Answer 2

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