无法访问 HOC 类函数中的道具，但能够在渲染中访问它们

Question

我想实现的目标：我有很多表单，我想在我的 HOC 中保留表单验证逻辑，这样我就不必重复验证逻辑，因为大多数表单都有相同的字段和一些额外或更少的字段。

我是如何实现的：

学习创建 HOC，遵循此示例 HOC 示例并尝试创建如下所示的 HOC。

import React from 'react';
import {
spaceCheck,
specialCharacterCheck,
numberValidator
} from '../../utility/validators';
const fieldHOC = (WrappedComponent) => {
class HOC extends React.Component {
state = {
error: {
name_first: {
fieldType: 'name_first',
errorType: 0
},
name_last: {
fieldType: 'name_last',
errorType: 0
},
email: {
fieldType: 'email',
errorType: 0
}
}
};
getErrorMessage = (fieldType, errorType) => {
this.setState({
error: {
...this.state.error,
[fieldType]: {
...this.state.error[fieldType],
errorType
}
}
});
};
checkFieldsError = (currentFocus, nextFocus) => {
//Not able to get props passed by below component in class functions
console.log('MY PROPS', this.props);
const field = this.props[currentFocus];
if (field === '' || spaceCheck(field)) {
this.getErrorMessage(currentFocus, 1);
} else if (specialCharacterCheck(field)) {
this.getErrorMessage(currentFocus, 2);
} else if (numberValidator(field) || numberValidator(field)) {
this.getErrorMessage(currentFocus, 3);
} else {
this.setState({
error: {
...this.state.error,
[currentFocus]: {
...this.state.error[currentFocus],
errorType: 0
}
}
});
}
this[nextFocus].focus();
}
render() {
const { children } = this.props;
// Here able to access props(name_first, name_last and email) passed from below component 
// console.log('PROPS', this.props);
return (
<WrappedComponent
{...this.props}
error={this.state.error}
checkFieldsError={this.checkFieldsError}
>
{children}
</WrappedComponent>
);
}
}
return HOC;
};
export default fieldHOC;

我使用此 HOC 的组件是

const FieldValidation = fieldHOC(View);
class Account extends Component {
//Some class functions
render() {
const { spaceBottom, error } = this.state;
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
keyboardShouldPersistTaps="handled"
behavior={Platform.OS === 'ios' ? 'padding' : null}
>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="handled"
alwaysBounceVertical={false}
contentInset={{ bottom: 0 }}
>
<FieldValidation
name_first={this.state.name_first}
name_last={this.state.name_last}
email={this.state.email}
{...this.props}
>
<View
style={[
styles.UserContainer,
CommonStyle.shadowStyle
]}
>
<Text style={styles.headingTextStyle}>
Account Details
</Text>
<FormTextInputComponent           
{...testID('first_name')}
errorType={this.props.error.name_first.errorType}
onChangeText={this.handleTextChange('name_first')}
textInputRef={ref => {this.name_first = ref;}}
autoCapitalize="none"
spellCheck={false}
autoCorrect={false}
blurOnSubmit={false}
onSubmitEditing={() => {
this.props.checkFieldsError('name_first', 'name_last');
}}
/>
{this.props.error.name_first.errorType ?
(
<ErrorMessage textColor="#EA2027" error={error.name_first} />
)
: null}
//Last part 
export default fieldHOC(connect(mapStateToProps)(Account));

在上面的组件中，我正在尝试调用用 HOC 编写的验证函数，该函数checkFieldsError. 我面临的问题是，在<FieldValidation中传递的道具(如name_first)可以在 HOC 的渲染函数中访问，但在 HOC 的类函数中无法访问相同的道具。

很可能我试图做的是 React 中的反模式(我的猜测)。有人可以帮助我找出问题所在以及解决问题的正确方法吗？

编辑：在代码沙箱中实现的示例示例

Answer 1

这是我用您要实现的目标创建的codeSandBox示例，您会注意到在HOC中我尝试访问其功能中的props，还检查控制台以查看控制台日志，请检查代码并按照相同的示例进行操作。您将达到相同的结果。