2016-03-28 10 views
5

# 1Come passare correttamente le proprietà nidificate con gli attributi di diffusione? (JSX)

Ciao. Ho il codice:

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" 

Perché ricevo 1 di riferimento variabile per 2 componenti separati invece di 2 instanses di nested.prop per ogni componente? Perché this.props salva solo l'ultimo valore impostato per tutti gli instanses del componente dopo il montaggio? È un comportamento normale? Penso che il comportamento corretto stia avendo valori di proprietà differenti per diversi instanses.

P.S. Ho provato questo codice here.

# 2

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

La mia prossima domanda: How to pass nested properties without a manual mutation of props?

Ad esempio:

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

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

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

Guida al codice di cui sopra JSX La funzione di attributo spread sovrascrive solo props.nested e io perdo le proprietà nidificate di default. Ma non è quello di cui ho bisogno. Che ne dici di implementare un attraversamento ricorsivo di oggetti nidificati nella fase di analisi degli attributi di diffusione JSX?
Oppure c'è qualche schema utile per questo caso?

+1

Si prega di chiedere a un completo domanda qui come i collegamenti possono morire. – Neal

+0

Ecco alcuni suggerimenti su come porre una buona domanda su SO: http://stackoverflow.com/help/how-to-ask – migg

+0

* "come passare le proprietà annidate" * 'pippo (a.nested.property)'? –

risposta

11

Questa è davvero una buona domanda!

Risposta breve: non è possibile fondersi in profondità con l'operatore di spread, ma solo fusione poco profonda. Ma sicuramente puoi scrivere una funzione che farà gli oggetti che attraversano e implementa una fusione profonda.

Questo in realtà si lascia 3 opzioni:

1) Basta non fare profonda unione. Se si dispone di 2 livello di oggetto nidificato si può fare una cosa semplice:

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

Shallow fusione forza di dire esplicitamente che si avrà il nuovo valore della proprietà nidificato. Quale è una buona cosa in quanto rende ovvio il tuo codice. Puoi anche provare gli esempi eseguibili here.

2) È possibile utilizzare una libreria per strutture immutabili. F.e. immutable.js. Con esso il tuo codice sembrerà abbastanza simile.

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) E 'possibile utilizzare profonda unione: trovare un po' implementazione in NPM o scrivere voi stessi e si avrà un codice come questo (nuovo immutabile.js come esempio):

const finalProps = oldProps.mergeDeep(newProps); 

Potrebbe essere questo, in alcuni casi, ma tale codice rende operazione di aggiornamento implicita e sorge un sacco di problemi che sono elencati notevolmente here

+0

Operatore di diffusione [funziona correttamente] (http://codepen.io/voronar/pen/eZEzYm). –

Problemi correlati