Question

我已经实现了以下库：

我们知道，该库具有默认值，因此无需为每个输入进行定义：

tintColor
baseColor
fontSize
...

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

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}
/>

我的属性有问题。

问题？

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

我在做什么错了？ “错误”道具也会发生同样的情况。就像我无法覆盖属性...我想做的最好的方法是什么？

Answer 1

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

基本要点是将这些默认道具拉出到对象中，然后将spreading覆盖道具插入到该对象中，并向下传递到TextField。

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>
    );
};

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

1 个答案: