问我需要将一个变量从一个组件传递到另一个组件
EN

Stack Overflow用户

提问于 2021-01-31 23:44:47

回答 3查看 46关注 0票数 0

我有一个叫做form的插件，其中我得到了两个数据val1和val2，这个数据被传递给一个叫做route的插件，这个插件必须被传递给game插件，我的变量到达父插件，但是我不能把它传递给叫做game的子插件。请帮帮我，或者给我一些指导。

变量var1是我拯救的，我必须将它传递给游戏。

class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.localVar1 = "";
  }

  datosDeFormInicio = (var1,var2) =>{
    this.localVar1 = var1;
  }

  render() { 
    return (
      <Router>
        <Switch>
          <Route path="/juego">
            <Juego localVar1={this.localVar1} />
          </Route>
          <Route path="/">
            <Inicio datosDeFormInicio = {this.datosDeFormInicio}/>
          </Route>
        </Switch>
      </Router>  );
  }
}

export default Routes;

reactjs

javascript

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

发布于 2021-02-01 03:15:56

在Reactjs中，您可以使用redux将值传递给其他组件，这是Reactjs中的状态管理。但是，您可以使用https://github.com/facebookarchive/emitter来实现简单。

票数 0

Stack Overflow用户

发布于 2021-02-01 03:17:13

你需要使用state而不是那个变量。您需要在拥有this.state{localVar1: ""};的状态对象中添加localVar1

多么

您需要在datosDeFormInicio()中使用this.setState()

    datosDeFormInicio = (var1,var2) =>{
        this.setState(localVar1: var1);
    }

通常，我会将此函数称为setLocalVar1，但这只是一个命名约定。

为什么

简单地解释一下为什么您的方法不起作用:它与React更新组件的顺序有关，setState()触发父组件重新渲染，这就是为什么您不直接将对象赋给状态变量的原因

(this .state.localVar1 = someVar也不会触发reerender`)

以下是React文档中的setState链接，以获取更详细的解释：https://reactjs.org/docs/react-component.html#setstate

票数 0

Stack Overflow用户

发布于 2021-02-01 12:10:54

非常感谢你的回答，我遵循了使用状态的步骤，但它仍然没有传递给我组件Juego中的localVar变量，空变量到达。这是你写的代码。

 constructor(props) {
        super(props);
        this.state = {localVar:'',localVar2:''}
      }
      datosDeFormInicio = (var1,var2) =>{       
         this.setState({localVar: var1,localVar2:var2});
      }
 render() { 
    return (
      <Router>
          <Switch>
              <Route path="/juego">
                <Juego localVar={this.state.localVar} localVar2={this.state.localVar2} />
              </Route>
              <Route path="/">
                <Inicio datosDeFormInicio = {this.datosDeFormInicio}/>
              </Route>
          </Switch>
      </Router>  );
  }