Несколько дочерних компонентов вызывают действие от 1 до другого

Question

Я новичок в React.

У меня есть компонент (JSX), имеющий 3 дочерних компонента A, B и C.

Компонент A: есть список пользователей

Что я хочу, когда я нажимаю на любого пользователя, компоненты B и C должны обновляться с соответствующей информацией о выбранном пользователе, а идентификатор пользователя также должен обновляться в URL. И когда я обновляю страницу, она должна загрузить данные.

В настоящее время я выполняю рендеринг компонентов B и C, используя ReactDOM.render (), это не очень хороший способ сделать это.

Спасибо!

Answer 1

Я думаю, вы ищете что-то вроде этого, где вы делите состояние между дочерними компонентами.

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);

Рабочий пример здесь .