web-dev-qa-db-fra.com

Puis-je mettre à jour les accessoires d'un composant dans React.js?

Une fois que vous avez commencé à travailler avec React.js, il semble que props soit censé être statique (transmis depuis le composant parent), alors que state change en fonction des événements. Cependant, j'ai remarqué dans la documentation une référence à componentWillReceiveProps , qui inclut spécifiquement cet exemple:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Cela semble impliquer que les propriétés PEUVENT changer sur un composant en se basant sur la comparaison de nextProps avec this.props. Qu'est-ce que je rate? Comment les accessoires changent-ils ou me trompe-t-on à l'endroit où cela s'appelle?

javascriptreactjsproperties
168
Matt Huggins

Un composant ne peut pas mettre à jour ses propres accessoires sauf s'il s'agit de tableaux ou d'objets (le fait qu'un composant mette à jour ses propres accessoires même si possible est un anti-motif), mais peut mettre à jour son état et les accessoires de ses enfants.

Par exemple, un tableau de bord a un champ speed dans son état et le transmet à un enfant Jauge qui affiche cette vitesse. Sa méthode render n'est que return <Gauge speed={this.state.speed} />. Lorsque le tableau de bord appelle this.setState({speed: this.state.speed + 1}), la jauge est restituée avec la nouvelle valeur pour speed.

Juste avant que cela se produise, la fonction componentWillReceiveProps de la jauge est appelée, de sorte que la jauge ait une chance de comparer la nouvelle valeur à l'ancienne.

207
Valéry

PROPS

Un composant React devrait utiliser des accessoires pour stocker des informations pouvant être modifiées mais ne pouvant être modifiées que par un autre composant.

ETAT

Un composant React doit utiliser state pour stocker des informations que le composant lui-même peut modifier.

Un bon exemple est déjà fourni par Valéry.

27
Ali Adravi

Les accessoires peuvent changer lorsque le parent d'un composant rend le composant avec des propriétés différentes. Je pense que ceci est principalement une optimisation afin qu'aucun nouveau composant ne soit instancié.

24
Joost Diepenmaat

Astuce pour mettre à jour les accessoires s’ils sont array:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
      this.state = {
        count: this.props.count
      }
    }
  increment(){
    console.log("this.props.count");
    console.log(this.props.count);
    let count = this.state.count
    count.Push("new element");
    this.setState({ count: count})
  }
  render() {

    return (
      <View style={styles.container}>
        <Text>{ this.state.count.length }</Text>
        <Button
          onPress={this.increment.bind(this)}
          title={ "Increase" }
        />
      </View>
    );
  }
}

Counter.defaultProps = {
 count: []
}

export default Counter
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
2
Abhishek Kumar

si vous utilisez recompose, utilisez mapProps pour créer de nouveaux accessoires dérivés des accessoires entrants

Editer par exemple:

import { compose, mapProps } from 'recompose';

const SomeComponent = ({ url, onComplete }) => (
  {url ? (
    <View />
  ) : null}
)

export default compose(
  mapProps(({ url, storeUrl, history, ...props }) => ({
    ...props,
    onClose: () => {
      history.goBack();
    },
    url: url || storeUrl,
  })),
)(SomeComponent);
0
ehacinom