我需要將變量從一個組件傳遞到另一個組件

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