2016-06-16 10 views
0

So Iterieren ich diese Komponente haben, in dem ich die Kartenfunktion nutzen eine andere Komponente zu nennen:wie Requisiten auf eine bestimmte Komponente in redux passieren, wenn

class configstepper extends React.Component { 
... 
//in render 
if(this.props.selected_devices){ 
    return(
      this.props.selected_devices.map((row, index) => (
       <DeviceProps key={index} row={row} index={index} /> 

      )))} 
     ...} 

Jetzt ist mein DeviceProps Komponentendaten zu holen, so dass es eine hat Requisiten zu machen mein Problem ist, ich die Requisiten wollen ein jeweils DeviceProps um genau zu sein, nicht alle von ihnen:

class deviceProperties extends Component { 
... 

//in render 
<RaisedButton style={styles.Button}label="Read From Device" primary={true} onClick={this.handleRead.bind(this)}/> 
<TextField id={this.props.index} value={this.props.read_data} readOnly/> 
... 
//handleRead where i trigger the action 
    handleRead(){ 

    this.props.read_device() 
} 

//mapstate to props 
function mapStateToProps(state){ 
return { 
    read_data:state.config.test}} 

connect(mapStateToProps,actions)(deviceProperties) 

Daten geholt auf die Schaltfläche klicken, wenn ich alle machen die DeviceProps Komponenten die gleichen Daten, während ich bekommen will es nur auf die angeklickte Komponente bekommen ent.

+0

Bitte, verbessern Sie Ihre Beschreibung. ist DeviceProps gleich wie 'deviceProperties'? Wie wird 'mapStateToProps' angewendet? auf was? Teilen Sie die gesamte Implementierung von DeviceProps. –

+0

ja deviceProperties ist DeviceProps meine schlechte Ich habe meinen Code geändert Ich hoffe, es ist klarer – safouman

+0

Hey hast du die Antwort bekommen? Ich bin mit dem gleichen Problem stecken –

Antwort

0

Die Funktion mapStateToProps akzeptiert ein zweites Argument, das die Requisiten ist, die Sie an die Komponente vom übergeordneten Element übergeben haben. Sie können diese verwenden, um ein Stück Ihres Bundesstaats abzurufen jede Ihrer DeviceProps Instanzen. Ebenso akzeptiert die mapDispatchToProps die Requisiten auch als zweites Argument, mit dem Sie Aktionen speziell für jede Ihrer DeviceProps Instanzen erstellen können.

Zum Beispiel, sagen Sie in einer Stütze vorbei waren deviceId in Ihre DeviceProps Komponente genannt, mit deviceId eine eindeutige Kennung für ein bestimmtes Gerät zu sein:

<DeviceProps key={index} row={row} index={index} deviceId={deviceId} /> 

Dann können Sie diese eindeutige Kennung in der Karte Zustand verwenden und Requisiten Funktionen wie folgt:

class DeviceProps extends Component { 
    render() { 
     ... 
    } 
} 

function mapStateToProps(state, ownProps){ 
    return { 
    device: state.devices[ownProps.deviceId] 
    } 
} 

function mapActionsToProps(dispatch, ownProps) { 
    return bindActionCreators({ 
    readDeviceData:() => DeviceActions.readDeviceData(ownProps.deviceId) 
    }, dispatch) 
} 

connect(mapStateToProps, mapActionsToProps)(DeviceProps) 
+0

das Problem ist in den Textfeld Wert, wenn ich ihm die Requisiten aus der Aktion zuweisen alle Textfelder in den Geräten props Instanzen haben den gleichen Wert – safouman

+0

Sounds wie Sie möglicherweise müssen Ihre redux speichern, so dass Sie können Daten pro Gerät speichern. Wenn sie alle dieselbe Speichereigenschaft teilen, dann werden sie am Ende dieselben Daten anzeigen. – ctrlplusb

+0

irgendwelche Ideen, wie man das macht? – safouman

Verwandte Themen