Les composants enfants multiples appellent l'action d'un à un autre

Question

Je suis nouveau avec React.

J'ai un composant (JSX) ayant 3 composants enfants A, B et C.

Composant A : liste d'utilisateurs

Ce que je veux, c'est que lorsque je clique sur un utilisateur, les composants B et C soient mis à jour avec les informations relatives à l'utilisateur cliqué et que l'identifiant de l'utilisateur soit également mis à jour dans l'URL. Et lorsque je rafraîchis la page, elle doit charger les données.

Actuellement, j'effectue le rendu des composants B et C en utilisant ReactDOM.render(), ce qui n'est pas une bonne façon de faire.

Merci !

Answer 1

Je pense que vous cherchez quelque chose comme ça, où vous partagez l'état entre les composants enfants.

import React from "react";
import ReactDOM from "react-dom";

const A = ({ users, selectUser }) => {
  return (
    <React.Fragment>
      <h1>I am A.</h1>
      {users.map((u, i) => {
        return <button onClick={() => selectUser(i)}>{u}</button>;
      })}
    </React.Fragment>
  );
};

const B = ({ user }) => {
  return <h1>I am B. Current user: {user}</h1>;
};

const C = ({ user }) => {
  return <h1>I am C. Current user: {user}</h1>;
};

class App extends React.Component {
  state = {
    users: ["bob", "anne", "mary"],
    currentUserIndex: 0
  };

  selectUser = n => {
    this.setState({
      currentUserIndex: n
    });
  };

  render() {
    const { users, currentUserIndex } = this.state;
    const currentUser = users[currentUserIndex];

    return (
      <React.Fragment>
        <A selectUser={this.selectUser} users={users} />
        <B user={currentUser} />
        <C user={currentUser} />
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Exemple de travail aquí .