React
Kommunizieren Sie zwischen Komponenten

Kommunikation zwischen zustandslosen Funktionskomponenten

In diesem Beispiel werden Redux und React Redux Module verwendet, um den Anwendungsstatus zu handhaben und die Funktionskomponenten automatisch wiederzugeben., Und natürlich React und React Dom

Sie können die vollständige Demo hier abschließen

Im folgenden Beispiel haben wir drei verschiedene Komponenten und eine verbundene Komponente

• UserInputForm : Diese Komponente zeigt ein Eingabefeld an. Wenn sich der inputChange ändert, wird die inputChange Methode für props (die von der übergeordneten Komponente bereitgestellt werden) inputChange Wenn die Daten ebenfalls angegeben werden, wird dies im Eingabefeld angezeigt.

• UserDashboard : Diese Komponente zeigt eine einfache Nachricht an und UserInputForm Komponente. Außerdem übergibt sie die inputChange Methode an die UserInputForm Komponente. Die UserInputForm Komponente inturn verwendet diese Methode zur Kommunikation mit der übergeordneten Komponente.

  • UserDashboardConnected : Diese Komponente UserDashboard die UserDashboard Komponente UserDashboard mit der ReactRedux connect . Dies erleichtert uns die Verwaltung des Komponentenstatus und das Aktualisieren der Komponente, wenn sich der Status ändert.

• App : Diese Komponente rendert nur die UserDashboardConnected Komponente.

const UserInputForm = (props) => {
  
  let handleSubmit = (e) => {
    e.preventDefault();
  }

  return(
    <form action="" onSubmit={handleSubmit}>
      <label htmlFor="name">Please enter your name</label>
      <br />
      <input type="text" id="name" defaultValue={props.data.name || ''} onChange={ props.inputChange } />
    </form>
  )

}


const UserDashboard = (props) => {
   
  let inputChangeHandler = (event) => {
    props.updateName(event.target.value);
  }

  return(
    <div>
      <h1>Hi { props.user.name || 'User' }</h1>
      <UserInputForm data={props.user} inputChange={inputChangeHandler} />
    </div>
  )

}

const mapStateToProps = (state) => {
  return {
    user: state
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateName: (data) => dispatch( Action.updateName(data) ),
  };
};

const { connect, Provider } = ReactRedux;
const UserDashboardConnected = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserDashboard);



const App = (props) => {
  return(
    <div>
      <h1>Communication between Stateless Functional Components</h1>
      <UserDashboardConnected />
    </div>
  )
}



const user = (state={name: 'John'}, action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      return Object.assign( {}, state, {name: action.payload}  );

    default:
      return state;
  }
};

const { createStore } = Redux;
const store = createStore(user);
const Action = {
  updateName: (data) => {
    return { type : 'UPDATE_NAME', payload: data }
  },
}


ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('application')
);

JS-Bin-URL