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

Après avoir commencé à travailler avec React.js, il semble que props soient destinés à être statiques (transmis à partir du composant parent), tandis que state change en fonction des événements. Cependant, j'ai remarqué dans les docs 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 basé sur la comparaison de nextProps à this.props. Ce qui me manque? Comment les accessoires changent-ils, ou est-ce que je me trompe sur l'endroit où cela se produit appelé?

129
demandé sur David Nathan 2014-07-24 20:50:38

5 réponses

Un composant ne peut pas mettre à jour ses propres accessoires à moins qu'ils ne soient des tableaux ou des objets (avoir un composant mettre à jour ses propres accessoires même si possible est un anti-pattern), 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 de jauge qui affiche cette vitesse. Sa méthode render est juste 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 arrive, La jauge componentWillReceiveProps est appelée, de sorte que la jauge a une chance de comparer la nouvelle valeur à l'ancienne.

156
répondu Valéry 2016-06-14 21:13:28

Les accessoires peuvent changer lorsque le parent d'un composant restitue le composant avec des propriétés différentes. Je pense que c'est surtout une optimisation de sorte qu'aucun nouveau composant doit être instancié.

20
répondu Joost Diepenmaat 2014-07-24 18:02:06

Accessoires

Un composant React doit utiliser des accessoires pour stocker des informations pouvant être modifié, mais ne peut être modifié que par un composant différent.

État

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

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

4
répondu Ali Adravi 2018-07-25 18:14:33

Astuce pour mettre à jour les accessoires s'ils sont de tableau :

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
      }
    }
  increament(){
    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.increament.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,
  },
});
1
répondu Abhishek Kumar 2017-06-26 15:47:55

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

0
répondu ehacinom 2018-10-03 17:35:00