将状态提升为容器组件

Question

通过Body.js函数，我有一个包含两个不同路线（User.js和Body.js）的程序我在名为state的{{1}}中保存了一个值我想在employeeCurrent路线上使用此employeeCurrent。

我想知道如何执行此操作，而无需将User.js导入User.js，因为Body.js会与User.js一起显示。

我的Body.js功能：

＆＃13;

Body.js

＆＃13;

我的User.js：

＆＃13;

import React from "react";
import "./Body.css";
import axios from "axios";
import { Link } from "react-router-dom";

class Body extends React.Component {
  constructor() {
    super();

    this.state = {
      employee: [],
      employeeCurrent: []
    };
  }

  componentDidMount() {
    axios
      .get("http://127.0.0.1:3004/employee")
      .then(response => this.setState({ employee: response.data }));
  }

  getName = () => {
    const { employee } = this.state;
    return employee.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => this.add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`https://picsum.photos/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
  };

  add = name => {
    const nam = name;
    this.state.employeeCurrent.push(nam);
    console.log(this.state.employeeCurrent);
  };

  render() {
    return <div className="body">{this.getName()}</div>;
  }
}

export default Body;

＆＃13;

有人可以帮助我吗？

Answer 1

您需要lift the state up:

通常，有几个组件需要反映相同的变化数据。我们建议将共享状态提升到最近的共同状态的祖先。

这正是你需要做的。 Home应保留employeeCurrent并将其传递给Body和User。

另一种方法是使用状态管理库，如redux或mobx。

Answer 2

将状态提升为容器组件

这里的最佳做法是将状态提升到容器组件，或使用类似Redux或Apollo或新的React Context并管理顶级状态。如果您不想将状态提升到Home.js（可能不属于那里），那么将根据路径呈现Body.js或User.js的容器。

路线集装箱模式

您可以创建布局组件，例如。 DashboardContainer将管理以下路由集合的数据：

<Router>
  <Switch>
    <DashboardContainer
      exact
      path="/body"
      component={Body}
      {...props}
    />
    <DashboardContainer
      exact
      path="/user"
      component={User}
      {...props}
    />
    <Route component={NotFound} />
  </Switch>
</Router>

所以我们在这里使用DashboardContainer进行/ body和/ user路由。然后路由器将Body或User组件传递给它，它将接收道具并说明容器具有：

export class DashboardContainer extends React.Component {
  state = {
    employeeCurrent: null,
  };

  render() {
    const {
      drawerOpen,
      loggingIn,
      authenticated,
      component,
      user,
      history,
      ...rest
    } = this.props;
    const { employeeCurrent } = this.state;
    return (
      <div>
        <DashboardNavigation
          drawerOpen={this.props.drawerOpen}
          history={this.props.history}
          authenticated={authenticated}
          user={user}
        />
        <Route
          {...rest}
          render={props => React.createElement(
            component,
            {
              ...props,
              employeeCurrent,
              authenticated,
              user,
            },
          )}
        />
      </div>)
  }
}

注意我们的Route存在于DashboardContainer中。然后路由器仍然控制你要渲染的组件（User.js或Body.js），但总是传入数据。此处还包括DashboardNavigation组件，以说明如何将其用于布局（或任何其他形式的共享数据......）。

如果要创建将共享相同数据或布局的其他组件，或者如果要保护路由，也可以扩展（例如，如果authenticated = true，则仅渲染React.createElement，否则渲染{{1} } 零件）。

Answer 3

如果你想要传递你的状态一次并且不想更新它，你可以对其进行字符串化并通过网址传递。

<Link className='link' to={`/user/${name.name}?employeeCurrent=${JSON.stringify(this.state.employeeCurrent)}`}>

但是当你不想使用磁通库时，这是不好的做法。

另一种正确的方法是使用redux库并在那里保存和管理您的员工。

如何传递状态而不导入组件ReactJS？

3 个答案:

将状态提升为容器组件

路线集装箱模式