Question

我是React的新手。

我有一个具有三个子组件A，B和C的组件（JSX）。

一个组件：具有用户列表

我想要的是，当我单击任何用户时，组件B和C应该使用所单击的用户的相关信息进行更新，并且用户ID也应在URL中进行更新。当我刷新页面时，它应该加载数据。

目前，我正在使用ReactDOM.render（）渲染B和C组件，但这不是一个好方法。

谢谢！

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

工作示例here。

多个子组件将动作从1调用到另一个

1 个答案: