在reactjs中检测到循环依赖

Question

我在我的模式中面临循环依赖问题，其中已注册用户的注册表单中有注册表单和登录按钮。此外，登录表单还有已注册用户的注册按钮。我听说es6解决了循环依赖问题，但我仍然得到它。我该如何解决这个问题？

  

检测到循环依赖关系中的警告：   app / containers / LoginContainer / index.js - ＆gt;   app / containers / Register / index.js - ＆gt;   应用程序/容器/ LoginContainer / index.js

     

检测到循环依赖关系中的警告：   app / containers / Register / index.js - ＆gt;   app / containers / LoginContainer / index.js - ＆gt;   应用程序/容器/注册/ index.js

import Login from "containers/LoginContainer";

const mapDispatchToProps = dispatch => ({
  showDialog: dialog => dispatch(showDialog(dialog)),
  hideDialog: () => dispatch(showDialog("null"))
});

class Register extends React.Component {
  render() {
    const { show_password, user } = this.state;
    return (
      <Modal show onHide={() => this.props.hideDialog()}>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group form-block">
            <input
              type="text"
              name="first_name"
              className="form-control-form "
              placeholder="First Name"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group form-block">
            <input
              type="text"
              name="last_name"
              className="form-control-form "
              placeholder="Last Name"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group form-block">
            <input
              type="email"
              name="email"
              className="form-control-form "
              placeholder="Email"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group form-block">
            <input
              type={show_password ? "text" : "password"}
              name="password"
              className="form-control-form"
              placeholder="Password"
              onChange={this.handleChange}
            />
          </div>
        </form>
        <Modal.Footer>
              <a
                className="btn-gst"
                onClick={() => this.props.showDialog(<Login />)}
              >
                Login
              </a>
        </Modal.Footer>
      </Modal>
    );
  }
}



import Register from 'containers/Register';

<Modal show onHide={() => this.props.hideDialog()}>
  <form onSubmit={this.handleSubmit}>
    <div className="form-group form-block">
      <input
        type="text"
        name="username"
      />
    </div>
    <div className="form-group form-block">
      <input
        type="password"
        name="password"
        required
      />
    </div>
    <div className="row">
      <div className="col-md-6">
        <div className="checkbox meta">
          <label>
            <input type="checkbox" /> Remember me
          </label>
        </div>
      </div>
  </form>
  <Modal.Footer>
        <a
          className="btn-gst"
          onClick={() => this.props.showDialog(<Register />)}
        >
          Sign Up
        </a>
  </Modal.Footer>
</Modal>