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

Question

我有一个名为form的插件，在其中我得到两个数据val1和val2 ，这被传递给一个名为route的插件，这必须传递给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;

Answer 1

在 Reactjs 中，可以使用 redux 向其他组件传递一个值，在 ZFCE39BEF5E2EA931586B6A985A6942EF573EZ 管理中 ZFCE39BEF5E4BD9F39638 但是，您可以简单地使用https://github.com/facebookarchive/emitter 。

Answer 2

您需要使用 state 而不是该变量。 您需要将 localVar1 添加到 state object 您有this.state{localVar1: ""};

如何

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

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

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

为什么

简单解释一下为什么你的不起作用：它与 React 更新组件的顺序有关，并且setState()触发父组件重新渲染，这就是为什么你不会直接将 object 分配给 state 变量的原因

（ this.state.localVar1 = someVar也不会触发重新渲染`）

这是 React 文档中 setState 的链接，以获得更详细的说明： https://reactjs.org/docs/react-component.html#setstate

Answer 3

非常感谢您的回答，我按照步骤使用 state，但仍然没有将组件 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>  );
  }