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导入到文件中，您应该可以在Login中调用Signup.prototype.signUpFunc.call(this);。虽然如此，这对我来说似乎是一种反模式......为什么不将任何需要重用的函数放入自己的文件中并将它们导入到两个点？

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

1 个答案: