Question

从另一个文件中的App.js访问变量uid的正确方法是什么？

我有一个变量uid，在用户通过Google身份验证（Firebase）登录后，会为用户提供唯一的UID。

我在构造函数的上方（上方）定义变量：

var uid;

class App extends Component {

constructor(props) {
super(props);

this.addPlayer = this.addPlayer.bind(this);
this.downvotePlayer = this.downvotePlayer.bind(this);
this.upvotePlayer = this.upvotePlayer.bind(this);
this.database = firebase.database().ref().child('players');
this.userLogIn = this.userLogIn.bind(this);
this.userLogOut = this.userLogOut.bind(this);

this.state = {
  players: [],
  user: null,
  weekTabVisible: null,
  byeTabVisible: null
}
this.players = [];
}

稍后，当用户登录并调用Auth（）时，uid会被赋予一个值。

componentDidMount() {
auth.onAuthStateChanged((user) => {
  if (user) {
    this.setState({ user });
    uid = user.uid;
  }
});
}

此时，我在此App.js文件中多次使用uid。

在另一个文件中访问此uid值的正确方法是什么？当我试图将uid设置为道具时，我在使用this.props.uid

时在我的其他页面中得到任何未定义的内容时遇到了问题

尝试使用它的组件文件是Player.jsx，我将它添加到App.js中的render（）中，就像这样（以及构造函数中的上面）

<Player
  playerContent={player.playerContent}
  playerId={player.id}
  key={player.id}
  upvotePlayer={this.upvotePlayer}
  downvotePlayer={this.downvotePlayer}
  userLogIn={this.userLogIn}
  userLogOut={this.userLogOut}
  uid={this.uid}
/>

我对ReactJS相当新，所以我尝试了一些文档和教程，但我似乎对变量如何通过其他地方作为道具感到困惑。

提前致谢

修改

解决了@Spencer Wieczorek建议的问题。我将this.uid = null添加到我的App构造函数中，并使用this.uid进行引用。然后在App.js中的Player组件中传递uid = {this.uid}后，我能够在Player.jsx中使用this.props.uid来引用uid

访问不同组件中的变量

修改

0 个答案: