Метод Asign Child для родительского элемента в реакции

Question

Я создаю приложение с React and React Router, я начинаю с реагирования.

У меня есть этот родительский класс:

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> 
    ); 
    } 

} 

И этот ребенок «Войти» класс

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 «дочерние компоненты» с тем же «шаблон» и для каждого компонента мне нужен компонент BtnLink, который должен будет вызвать собственный дочерний логический метод (как «login», «register», «logout»). По этой причине, я думаю, что лучше поставить этот компонент 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> 
    ); 
    } 
}