Comment passer correctement des propriétés imbriquées avec des attributs de propagation? (JSX)

Question

# 1

Bonjour. J'ai le code:

class Component extends React.Component 
{ 
    render() 
    { 
    this.props.nested.prop = this.props.parse.nested.prop; 
    return <div>Component</div>; 
    } 
    componentDidMount() 
    { 
    console.log(this.props.nested.prop); 
    } 
} 
Component.defaultProps = 
{ 
    nested: 
    { 
    prop: "default" 
    } 
}; 

const obj1 = 
{ 
    nested: 
    { 
    prop: "obj1" 
    } 
}; 
const obj2 = 
{ 
    nested: 
    { 
    prop: "obj2" 
    } 
}; 

class Application extends React.Component 
{ 
    render() 
    { 
    return (
    <div> 
     <Component parse={obj1}/> 
     <Component parse={obj2}/> 
    </div> 
    ); 
    } 
} 

React.render(<Application />, document.getElementById('app')); 
//console output: 
//"obj2" 
//"obj2" 

Pourquoi dois-je obtenir une référence variable pour 2 composants séparés au lieu de 2 instanses de nested.prop pour tous les composants? Pourquoi this.props enregistre uniquement la dernière valeur définie pour toutes les instan- ces du composant après le montage? Est-ce un comportement normal? Je pense que le comportement correct est d'avoir des valeurs de propriétés différentes pour différentes instanses.

P.S. J'ai testé ce code here.

# 2

jimfb a été annswered: "You are mutating the default prop that was passed in. The line this.props.nested.prop = this.props.parse.nested.prop; is illegal."

Ma question suivante: How to pass nested properties without a manual mutation of props?

Par exemple:

Component.defaultProps = 
{ 
    nested: 
    { 
    prop1: "default", 
    prop2: "default" 
    } 
}; 

const props = 
{ 
    nested: 
    { 
    prop1: "value" 
    } 
}; 

let component = <Component {...props}/>; 

Guide du code ci-dessus JSX La fonction d'attribut spread remplace juste props.nested et je perds les propriétés imbriquées par défaut. Mais ce n'est pas ce dont j'ai besoin. Comment implémenter une traversée récursive des objets imbriqués dans l'étape d'analyse des attributs de propagation JSX?
Ou Y a-t-il un modèle utile pour ce cas?

Answer 1

C'est en fait une bonne question! Réponse courte: vous ne pouvez pas fusionner en profondeur avec l'opérateur de propagation - il ne fait que fusionner superficiellement. Mais vous pouvez sûrement écrire une fonction qui fera des objets traversant et implémente une fusion profonde.

Cela vous laisse en fait 3 options:

1) Il suffit de ne pas faire la fusion profonde. Si vous avez 2 niveau objet imbriqué que vous pouvez faire une telle chose simple:

const newNested = {...oldProps.nested, ...newProps.nested }; 
const finalProps = { ...oldProps, nested: newNested }; 

peu profonde fusion la force vous dire explicitement que vous aurez une nouvelle valeur de la propriété nichée. Ce qui est une bonne chose car cela rend votre code évident. Vous pouvez également essayer des exemples exécutables here.

2) Vous pouvez utiliser une bibliothèque pour les structures immuables. F.e. immutable.js. Avec cela, votre code sera très similaire.

const oldProps = Immutable.fromJS({ 
    nested: 
    { 
    prop1: "OldValue1", 
    prop2: "OldValue2", 
    } 
}); 

const newProps = Immutable.fromJS({ 
    nested: 
    { 
    prop1: "NewValue1", 
    } 
}); 

const finalProps = oldProps.updateIn(['nested'], (oldNested)=> 
    oldNested.merge(newProps.get('nested')) 
) 

3) Vous pouvez utiliser la fusion profonde: trouver une mise en œuvre NPM ou d'écrire vous-même et vous aurez un code comme celui-ci (encore une fois immuable.js à titre d'exemple):

const finalProps = oldProps.mergeDeep(newProps); 

Vous voudrez peut-être cela dans certains cas, mais ce code rend l'opération de mise à jour implicite et il monte beaucoup de problèmes qui sont répertoriés fortement here