如何在不渲染整个组件的情况下使用其他组件功能

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

}); 

和楼下是在我想要使用此功能

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

假设你已经导入Signup与文件中的分量Login，您应该可以在登录内部拨打Signup.prototype.signUpFunc.call(this);。尽管如此，这对我来说似乎是一种反模式...为什么不把任何需要重用的函数放到自己的文件中并将它们导入到两个位置？