So teilen Sie Daten innerhalb von Reaktionskomponenten

Dieses Mal zeige ich Ihnen, wie Sie Daten in Reaktionskomponenten teilen und welche Vorsichtsmaßnahmen für die Datenfreigabe in Reaktionskomponenten gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Verwenden Sie React-Redux, um Daten zwischen React-Redux-Daten auszutauschen

1 React-Redux installieren

$ npm i --save react-redux

2 Die richtige Komponente weist den Speicher dem Speicherattribut des Anbieters zu und

umschließt die Stammkomponente mit dem Anbieter.

import {Provider,connect} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
 <Wrap/>
</Provider>,document.getElementById('example'))

Auf diese Weise können alle Unterkomponenten in der Root-Komponente den Wert im Store erhalten

3. connect sekundäre Kapselung der Root-Komponente

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

connect erhält Zwei Funktionen als Parameter: Ein „mapStateToProps“ definiert, welche Store-Eigenschaften den Eigenschaften der Root-Komponente zugeordnet werden (übergeben Sie den Store an die React-Komponente), und ein „mapDispatchToProps“ definiert, welche Aktionen als Root-Komponenten-Eigenschaften verwendet werden können (übergeben Sie die Daten aus der React-Komponente). Komponente in den Store)

3. Definieren Sie diese beiden Zuordnungsfunktionen

function mapStateToProps(state){
 return {
  name:state.name,
  pass:state.pass
 }
}
function mapDispatchToProps(dispatch){
 
 return {actions:bindActionCreators(actions,dispatch)
 }
}

, um den Namen und die Übergabe im Store dem Namen zuzuordnen und Attribute der Stammkomponente zu übergeben.

actions ist ein Objekt, das die Aktionskonstruktionsfunktion enthält. Verwenden Sie bindActionCreators, um die Objektaktionen an das Aktionsattribut der Stammkomponente zu binden.

4. Verwenden Sie <Show name={this.props.name} pass={this.props.pass}></Show>, wobei die Stammkomponente auf die Unterkomponente verweist, um die Speicherdaten an die Unterkomponente zu übergeben.

5 die Daten

<Input actions={this.props.actions} ></Input>

Aktionen zuerst als Attribute an die Unterkomponente übergeben

Die Unterkomponente ruft die Methode in Aktionen auf, um die Aktion zu erstellen

//Input组件
export default class Input extends React.Component{
sure(){
this.props.actions.add({name:this.refs.name.value,pass:this.refs.pass.value})
}
 render(){ 
  return (
    <p> 
  姓名:<input ref="name" type="text"/>
  密码:<input ref="pass" type="text"/>
  <button onClick={this.sure.bind(this)}>登录</button>
 </p>
  )
 }
}

Weil wir nach der Erstellung die Funktion bindActionCreators verwenden Die Aktion ruft sofort und automatisch store.dispatch(action) auf, um die zu speichernden Daten zu aktualisieren.

Auf diese Weise verwenden wir das React-Redux-Modul, um den Datenaustausch zwischen verschiedenen React-Komponenten abzuschließen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie JS, um Bilder zu bearbeiten und nur Schwarzweiß zu belassen

So verwenden Sie Vue-Komponenten in aktuelle Projekte

Das obige ist der detaillierte Inhalt vonSo teilen Sie Daten innerhalb von Reaktionskomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!