自定义组件不覆盖基本属性

Question

我已经实现了以下库：

反应原生材质文本字段

众所周知，该库具有默认值，因此不是为每个输入定义：

• 色调颜色
• 基色
• 字体大小
• 。

我已经定义了我的自定义组件：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TextField } from 'react-native-materialui-textfield';

const styles = StyleSheet.create({
    inputEditText: {
        paddingVertical: 6,
    },
});
export const InputEditText = () => (
    <View style={styles.inputEditText}>
        <TextField
            label='test'
            autoCapitalize='none'
            fontSize={20}
            lineWidth={1}
            titleFontSize={16}
            labelHeight={42}
            textColor='white'
            tintColor='white'
            baseColor='rgb(225, 231, 228)'
            autoCorrect={false}
            enablesReturnKeyAutomatically={true}
            onFocus={this.onFocus}
            returnKeyType='next'
        />
    </View>
);

所以现在如果我想用我自己的风格实现库，我刚刚定义了：

<InputEditText
      key={1}
      keyboardType='email-address'
      value={this.state.username}
      label='username'
      error={this.state.errorUsername}
/>

我对属性有问题。

问题出在哪里？

标签

用户名不会覆盖我在自定义组件中定义的默认标签，因此表单始终显示测试

我做错了什么？"错误"道具也会发生同样的情况。就像我无法覆盖属性一样...对于我想做的事情，最好的方法是什么？

Answer 1

这些道具将被你的自定义道具覆盖，你需要实现一些额外的登录，以考虑到从任何使用 InputEditText HOC 的组件传下来的任何道具。

基本要点是将这些默认道具拉出到一个对象中，然后将覆盖道具分散到该对象中并传递到文本字段。

export const InputEditText = (overrideProps) => {
    const props = {
        label: 'test',
        autoCapitalize: 'none',
        fontSize: 20,
        lineWidth: 1,
        titleFontSize: 16,
        labelHeight: 42,
        textColor: 'white',
        tintColor: 'white',
        baseColor: 'rgb(225, 231, 228)',
        autoCorrect: false,
        enablesReturnKeyAutomatically: true,
        onFocus: this.onFocus,
        returnKeyType: 'next',
        ...overrideProps
    };
    return(
        <View style={styles.inputEditText}>
            <TextField {...props} />
        </View>
    );
};