Javascript 在reactjs中检测到循环依赖项

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

检测到循环依赖项中的警告： app/containers/LoginContainer/index.js-> app/containers/Register/index.js-> app/containers/LoginContainer/index.js

检测到循环依赖项中的警告： app/containers/Register/index.js-> app/containers/LoginContainer/index.js-> app/containers/Register/index.js

从“容器/LoginContainer”导入登录名；
const mapDispatchToProps=调度=>({
showDialog:dialog=>dispatch（showDialog（dialog）），
hideDialog:（）=>分派（showDialog（“null”））
});
类寄存器扩展了React.Component{
render（）{
const{show_password，user}=this.state；
返回(
this.props.hideDialog（）}>
this.props.showDialog（）}
>
登录
);
}
}
从“集装箱/登记册”进口登记册；
this.props.hideDialog（）}>
记得我吗
this.props.showDialog（）}
>
注册

有时可以使用循环依赖项。ES6模块是为处理它们而设计的，但我得到了一个很大的警告。用户将在控制台中看到这一点。

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>