コンポーネント全体をレンダリングせずに他のコンポーネントの機能を使用する方法

Question

コンポーネント全体のレンダリングなしに、あるコンポーネントの機能を他のコンポーネントの機能に使用するにはどうすればよいですか。ここ は、私が使用したい機能だ私のコンポーネントです：

var Signup = React.createClass({ 
    signUpFunc: function (e) { 
     e.preventDefault(); 

     var user = this.refs.user.value; 
     var _email = this.refs.email.value; 
     var _pass = this.refs.pass.value; 

     if (_email && _pass && user !== '' && _email.trim().length && user.trim().length && _pass.trim().length !== 0) { 
      console.log('Account Created'); 
     } 
    }, 
    render: function() { 
    return (
     <div> 
     <h2>Teacher Sign Up</h2> 
      <form onSubmit={this.signUpFunc}> 
       <label>User Name:</label> 
       <br /> 
       <input type="text" ref="user" /> 
       <br /> 
       <label>Email:</label> 
       <br /> 
       <input type="text" ref="email" /> 
       <br /> 
       <label>Password:</label> 
       <br /> 
       <input type="text" ref="pass" /> 
       <br /> 
       <button>Sign Up</button> 
      </form> 
     </div> 
    ) 
} 

}); 

とダウン以下は、私はあなたが持つファイルにSignupをインポートしたと仮定すると、

var Login = React.createClass({ 
    Submit: function (e) { 
     e.preventDefault(); 

     var email = this.refs.email.value; 
     var pass = this.refs.pass.value; 

     if (email && pass !== '' && email.trim().length && pass.trim().length !== 0) { 

     } 
    }, 
    render: function() { 
     return (
      <div> 
       <h2>Teachers Login</h2> 
       <form onSubmit={this.Submit}> 
        <label>Email:</label> 
        <br /> 
        <input type="text" ref="email" /> 
        <br /> 
        <label>Password:</label> 
        <br /> 
        <input type="text" ref="pass" /> 
        <br /> 
        <button>Login</button> 
        <Link to="/signup"><button>Register</button></Link> 
       </form> 
      </div> 
     ) 
    } 
}); 

Answer 1

この機能を使用する場合、使用するコンポーネントですLoginにログインすると、Signup.prototype.signUpFunc.call(this);にログインすることができます。しかし、これは私には反パターンのようです...再利用する必要のある関数を自分のファイルに入れて、両方の場所にインポートするのはなぜですか？