Javascript 如何在不导入组件的情况下传递状态？

我有一个程序有两种不同的路由（

Body.js

和

User.js

），通过

Body.js

函数，我在

状态下保存了一个名为
employeeCurrent
的值，我想在
User.js
路由上使用这个
employeeCurrent

我想知道如何做到这一点，而不必将
User.js
导入
Body.js
，因为在那里，
User.js
将与
Body.js
一起出现

My Body.js具有以下功能：


从“React”导入React；
导入“/Body.css”；
从“axios”导入axios；
从“react router dom”导入{Link}；
类主体扩展了React.Component{
构造函数（）{
超级（）；
此.state={
员工：[]，
员工当前：[]
};
}
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=>(
{" "}
this.add（name）}key={name.id}className=“item”>
{" "}
{" "}
{name.name}
{" "}
));
};
添加=名称=>{
const nam=名称；
this.state.employeeCurrent.push（nam）；
console.log（this.state.employeeCurrent）；
};
render（）{
返回{this.getName（）}；
}
}
导出默认体您需要

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

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

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

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

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

另一种方法是使用状态管理库，如redux或mobx
 如果您想只传递一次您的状态，而不打算更新它，您可以将其字符串化并通过url传递

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



但这是一种不好的做法，在您不想使用flux库时使用

所以，另一个正确的方法是使用该库，并在其中保存和管理您的员工。
如果您希望只传递一次状态，而不打算更新状态，则可以将其字符串化并通过url传递

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



但这是一种不好的做法，在您不想使用flux库时使用

所以，另一个正确的方法是使用库并保存和管理其中的员工。
将状态提升到容器组件
这里的最佳实践是将状态提升到容器组件，或者使用Redux或Apollo之类的工具或新的React上下文，并在顶层管理状态。如果您不想将状态提升到Home.js（可能不属于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>



因此，我们在这里使用/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>)
  }
}

导出类DashboardContainer扩展React.Component{
状态={
employeeCurrent:空，
};
render（）{
常数{
抽屉，
登录，
认证，
组成部分，
用户，
历史
休息
}=这是道具；
const{employeeCurrent}=this.state；
返回(
React.createElement(
组成部分，
{
…道具，
雇员当前，
认证，
用户，
},
)}
/>
)
}
}

注意，我们的
路线
存在于仪表板容器中。然后，路由器仍然控制要渲染的组件（User.js或Body.js），但数据总是传入。这里还包括一个仪表板导航组件，以说明如何将其用于布局（或任何其他形式的共享数据…）

如果要创建共享相同数据或布局的其他组件，或者如果要保护路由（例如，如果authenticated=true，则仅渲染React.createElement，否则渲染
重定向
组件），则它也是可扩展的
 容器组件的提升状态
这里的最佳实践是将状态提升到容器组件，或者使用Redux或Apollo之类的工具或新的React上下文，并在顶层管理状态。如果您不想将状态提升到Home.js（可能不属于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>



因此，我们在这里使用/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>)
  }
}

导出类DashboardContainer扩展React.Component{
状态={
employeeCurrent:空，
};
render（）{
常数{
抽屉，
登录，
认证，
组成部分，
用户，
历史
休息
}=这是道具；
const{employeeCurrent}=this.state；
返回(
React.createElement(
组成部分，