javascript - React中构造函数和属性的正确使用

Question

我对 React 很陌生，所以有时我想知道当我得到一些东西时我是否以“正确”的方式做到了。

我写了一个简单的TimePickerComponent(基于material-ui-next):

class TimePickerComponent extends React.Component {
    _placeholder;
    _defaultTimeString;
    _timeString;
    _errorStatus;
    _classes;

    constructor({ placeholder, defaultTimeString, timeString, errorStatus, classes }) {
        super();
        this._placeholder = placeholder;
        this._defaultTimeString = defaultTimeString;
        this._timeString = timeString;
        this._errorStatus = errorStatus;
        this._classes = classes;
    }

    get Placeholder() {
        return this._placeholder;
    }

    get DefaultTimeString() {
        return this._defaultTimeString ? this._defaultTimeString : CONTROLS_CONSTANTS.DEFAULT_TIME_STRING;
    }

    get TimeString() {
        return this._timeString;
    }

    get ErrorStatus() {
        return this._errorStatus;
    }

    get Classes() {
        return this._classes;
    }

    render() {
        return <FormControl>
            <TextField error={this.ErrorStatus}
                label={this.Placeholder}
                defaultValue={this.TimeString ? this.TimeString : this.DefaultTimeString}
                className={this.Classes.layout}
                type="time"
                InputLabelProps={{
                    shrink: true
                }}
            />
        </FormControl>
    }
}

TimePickerComponent.propTypes = {
    placeholder: PropTypes.string.isRequired,
    defaultTimeString: PropTypes.string,
    timeString: PropTypes.string,
    errorStatus: PropTypes.bool
}

export default withStyles(styles)(TimePickerComponent);

如您所见，我创建了“私有(private)”字段(我知道在本例中它们不是私有(private)的)，并且在构造函数中，我将获得的值作为 props 分配给这些字段。

并且 getter 只是返回私有(private)字段或包含一些逻辑，例如 DefaultTimeString getter。

我现在的问题:这是正确的方法吗？或者我会遇到这个问题吗？对我来说，这是非常简单且不言自明的。

提前谢谢您。

Answer 1

您需要使用PropTypes和内部State 。在构造时赋值并不是一个好习惯，因为您应该使用 React Lifecycle 中的 componentWillMount 方法。为了更好地控制这些值。

这些建议是为了让您保持代码结构化并利用 React Components 内部结构。当然，如果您知道自己在做什么，则可以绕过它并回退到纯 JavaScript。