javascript - 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

通常这发生在模态框位于包装器内时，例如:

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

模态框是包装器中的子元素:

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

比应用程序:

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

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