Reagieren Native: was ist der richtige Weg, um pass-Stil Requisiten, bei Verwendung von spread-operator auf die Kind-Komponente

Dies ist mein Komponente A:

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={styles.input}
        {...props}
      />
  );
};

Dies ist mein Komponente B:

const SignIn = (props) => {
   return (
      <View>
        <GenericTextInput
                    placeholder="Email"
                    autoFocus={true}
                    keyboardType="email-address"
                    returnKeyType="next"
                    autoCorrect={false}
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
        />

        <GenericTextInput
                    placeholder="Password"
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
                    secureTextEntry={true}
        />
    </View>
   );
};

Möchte ich hinzufügen, dass ein bestimmtes styling zum 2. GenericTextInput in meinem Komponente B. In der Komponente A ich will das spread operator (es ist so bequem).

Wenn ich einfach machen:

//component A

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={[styles.input, props.styles]}
        {...props}
      />
  );
};


//component B

    const SignIn = (props) => {
       return (
          <View>
            <GenericTextInput
                        placeholder="Email"
                        autoFocus={true}
                        keyboardType="email-address"
                        returnKeyType="next"
                        autoCorrect={false}
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
            />

            <GenericTextInput
                        placeholder="Password"
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
                        secureTextEntry={true}

                        style={styles.customStyleForSecondInput}
            />
        </View>
       );
    };

Werde ich haben 2 style props im comp. Ein, und die zweite style prop wird komplett überschreibt die erste.

Was ist die richtige Art und Weise zum hinzufügen einer spezifischen styling für die 2.GenericTextInput?

InformationsquelleAutor Edgar | 2016-11-17
  1. 13

    Ich in der Regel destructure die benannte Eigenschaft (style) für das Objekt, und verwenden Sie den rest-operator zu sammeln, die restlichen Requisiten in ein neues Objekt:

    const {style, ...rest} = props;

return (
  <TextInput
    style={[styles.input, style]}
    {...rest}
  />
)

    Beachten Sie, dass dies erfordert die transform-Objekt-rest-Ausbreitung Babel-plugin. Dieses plugin ist im Reagieren Nativen Babel-Vorgabe, so wird es funktionieren out of the box-aber funktioniert möglicherweise nicht in anderen JavaScript-Umgebungen, ohne dieses plugin.

    • Danke! Ich wusste nicht, dass destructuring, wie dies möglich ist: {foo, bar...} = obj
    • Ich habe ein bisschen mehr details über diese syntax für die Nachwelt.
    • was ist, wenn der Stil prop ist ein array?
    InformationsquelleAutor jevakallio
  2. 1

    Wenn Sie möchten, dass Ihre benutzerdefinierten Formatvorlagen, um vollständig überschreiben die voreingestellten diejenigen, ich glaube, Sie können etwas tun, wie 

    style={props.style || styles.input}

    aber ich denke, Sie werden Fragen, wie Sie die benutzerdefinierten Stile überschreiben einige der preset-ones. In diesem Fall wäre es 

    style={[styles.input, props.style]}

    da Sie die übergabe der Immobilie nach unten, als 'Stil' nicht 'Stile' Sie legen Sie einfach das s am Ende.

    InformationsquelleAutor Matt Aft
Schreibe einen Kommentar