子要素の親要素に対するメソッドの反応

Question

私はReactとReact Routerでアプリケーションを作成していますが、私は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> 
    ); 
    } 

} 

そしてこの子「ログイン」クラス

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コンポーネント（ "ログイン"、 "レジスタ"、 "ログアウト"）として独自の子論理メソッドを呼び出す必要があります。このため、このコンポーネントを親コンポーネントに入れて、コードを繰り返さない方が良いと思います。ルートが変更され、その変更によって子コンポーネントがBtnLinkコンポーネントを変更し、そのonClickメソッドを変更して、必要な現在の子コンポーネントメソッドを動的に追加します。これは可能ですか？

Answer 1

ボタンが一般的な唯一のものであれば、最も簡単な解決策は各コンポーネントにボタンを1つ含めることだと思います。私の答えの残りの部分は、より一般的なコンポーネントがある場合にはより関連しますが、ここでも使用できます。

親コンポーネントを介してボタンを操作する代わりに、共通部分（前述の<BtnLink>など）を持つが、それ以外はカスタマイズ可能な<ControlledForm>（または任意の名前）コンポーネントを作成します。

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