Question

我正在使用React和React路由器创建一个应用程序，我从反应开始。

我有这个父类：

class Home extends React.Component{

  checkLogin(){
    /*any logic..*/
  }
  /**
  * La funcion render es obligatoria en cualquier componente React.
  */

  render(){

    this.checkLogin();
    return(

        <div>
        <div className="body">
            <div className="all-container">
                <main className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <Imagen src="/images/foodie.png" className="img-responsive logo" alt="Foodie" />

                        </div>
                    </div>
                    {this.props.children}
                </main>
                <div className="separador-footer"></div>
            </div>

        </div>
        </div>
    );
  }

}

这个孩子＆＃34;登录＆＃34;类

class Login extends React.Component{

  iniciarSesion(){
      /*The login logic method */
  }

  render(){

    return (
        <form action="#">
            <div className="row">
                <div className="col-md-12">

                    <InputControl type="text" className="form-control" placeholder="Usuario" id="username"/>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <input type="password" className="form-control" placeholder="Contrase&ntilde;a" id="password"/>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12 col-xs-12 col-sm-12 text-center">
                    <ul className="list-unstyled lista-links">
                        <li>
                            <Link to={Rutas.cambioClave}>Olvido su contrase&ntilde;a</Link>
                        </li>
                        <li>
                            <Link to={Rutas.registro}> Crear nueva Cuenta</Link>
                        </li>
                    </ul>
                </div>
            </div>

             <BtnLink onClick={()=>this.iniciarSesion()} label="Iniciar Sesi&oacute;n"/>
        </form>
    );
  }
}

问题是，我需要创建另外3或4＆＃34;子组件＆＃34;使用相同的＆＃34;模板＆＃34;在每个组件上我需要一个BtnLink组件，需要调用自己的子逻辑方法（如＃34;登录＆＃34;，＆＃34;注册＆＃34;，＆＃34;注销＆＃34 ）。出于这个原因，我认为最好将此BtnLink组件放在父组件中，而不是重复代码。然后，当路由发生变化并且随着该变化时，子组件修改BtnLink组件并更改其onClick方法以动态添加我可能需要的当前子组件方法。有可能这样做吗？

Answer 1

如果按钮是唯一常见的东西，我认为最简单的解决方案就是在每个组件中包含一个按钮。当有更多常见组件时，我的其余部分更为相关，但仍可在此处使用。

我不会尝试通过父组件操作按钮，而是创建一个<ControlledForm>（或任何你想要的名称）组件，它具有公共部分（例如你提到的<BtnLink>），但可以自定义。

const ControlledForm = (props) => (
  <form action={props.action}>
    {props.children}
    <BtnLink onClick={props.onClick} label={props.label}
  </form>
)

您需要提供哪些道具将取决于您需要控制哪些信息。

例如，使用上述<ControlledForm>，您可以按以下方式重新创建上述<Login>组件：

class Login extends React.Component{

  constructor(props) {
    super(props)
    this.iniciarSesion = this.iniciarSesion.bind(this)
  }    

  iniciarSesion(){
    /*The login logic method */
  }

  render(){
    return (
      <ControlledForm
        onClick={() => this.iniciarSesion()}
        label='Iniciar Sesi&oacute;n'
        action='#'
        >
        <div className="row">
          <div className="col-md-12">
            <InputControl type="text" className="form-control" placeholder="Usuario" id="username"/>
          </div>
        </div>
        <div className="row">
          <div className="col-md-12">
            <input type="password" className="form-control" placeholder="Contrase&ntilde;a" id="password"/>
          </div>
        </div>
        <div className="row">
          <div className="col-md-12 col-xs-12 col-sm-12 text-center">
            <ul className="list-unstyled lista-links">
              <li>
                <Link to={Rutas.cambioClave}>Olvido su contrase&ntilde;a</Link>
              </li>
              <li>
                <Link to={Rutas.registro}> Crear nueva Cuenta</Link>
              </li>
            </ul>
          </div>
        </div>
      </ControlledForm>
    );
  }
}

Asign Child的方法反应中的父元素

1 个答案: