Question

我正在研究一些反应组件，我对重用感兴趣。我看到一篇关于高阶组件的好文章

https://reactjs.org/docs/higher-order-components.html

我注意到事情似乎包含在新返回组件的render方法中。我认为保留一些继承可能会很好。所以我想让我不要重新扩展Component而是重新扩展实际的组件。有人告诉我这是不好的做法所以我想看看有没有充分的理由来避免这种情况？我的朋友提到了较低组件中的状态问题，但我认为您只在要用于较高组件的较高组件中设置状态（如处理提交。

我写了以下代码

export const addHandles = (component, props) => {
    return class extends component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
            this.state = props;
        }

        handleSubmit(event) {
          event.preventDefault();
        //do something like an ajax call with a props URL
        }

        handleChange (event) {
            const { name, value } = event.target;
            this.setState({[name]: value});
        }
    }
}

我有我的登录组件

export class Login extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <div className="mockup-content">
                <h3>Please login to use the application</h3>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="username">Username</label>
                    <input value={this.state.username} onChange={this.handleChange} type="text" id="username" name="username" />
                    <label htmlFor="password">Password</label>
                    <input value={this.state.password} onChange={this.handleChange} type="text" id="password" name="password" />
                    <button>submit</button>
                </form>
        </div>;
    };

我用它

import { Login } from 'built/Login';
import { addHandles } from 'built/Login';

const CustomLogin = addHandles(Login, {username: '', password: ''});

后来我从另一个组件正常使用它

render() { return<CustomLogin></CustomLogin> }

反应高阶组件不正确的做法？

0 个答案: