Question

我对React很陌生，所以我有时候想知道如果我做了一些工作，那么＆＃34;正确＆＃34;方式。

我写了一个简单的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);

如你所见，我创造了＃34;私人＆＃34;字段（我知道在这种情况下它们不是私有的）并且在构造函数中，我将作为道具的值分配给这些字段。

getter只返回私有字段或包含一些逻辑，如DefaultTimeString getter。

我现在的问题：这是正确的方法吗？或者我有这个问题吗？对我来说，这是非常直接和自我解释。

提前谢谢。

Answer 1

你可以使用ES6的破坏功能来制作道具。建议的方法是：

class TimePickerComponent extends React.Component {

 constructor(props) {
    super(props);
 }

 //All the other functions go in here.

 render (){
  const {
    placeholder, 
    defaultTimeString, 
    timeString, 
    errorStatus, 
    classes
   } = this.props

  return (
   <FormControl>
     <TextField error={errorStatus}
        label={placeholder}
        defaultValue={timeString? this.TimeString: defaultTimeString}
        className={classes.layout}
        type="time"
        InputLabelProps={{ shrink: true }}
        />
    </FormControl>);
  }
}

如果要将props分配给组件的本地状态，可以在构造函数中执行类似的操作。

 this.state = { 
   placeholder : props.placeholder,
   defaultTimeString : props.defaultTimeString
 }

希望这有帮助。

正确使用构造函数和属性进行反应

1 个答案: