Question

我的App.js文件中有一个变量uid和user，我的用户身份验证通过Google和Firebase进行。我正在尝试在我的其他文件PlayerForm.jsx中使用user.uid信息和引用，但显然它在那里是未定义的。能够访问App.js中该变量中的数据的正确方法是什么？我尝试将App.js导入到PlayerForm.jsx中，但仍然在使用uid时出现错误。

App.js（uid所在的位置）

var uid;

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

Here's a gist

第一个文件是带有身份验证的文件，变量位于底部。第二个文件是我希望能够访问该变量中保存的信息的地方。

Answer 1

您可以使用全局。在你的app.js中随处使用。

global.user = {
    _id: "5lclkdclkc2e50d5412d594",
    name: "Jeff",
    etc.
}

在另一个文件中，按global.user引用它。

Answer 2

假设App.js是您的应用程序的入口点，并且在App.js中导入了PlayerForm.js并在那里调用。从App.js调用它时，您可以将道具传递给PlayerForm。

在App.js中

import PlayerForm
...
<PlayerForm uid={user.uid} />

在PlayerForm.js

中

const PlayerForm({uid}) => (
   <div> `This is the ${uid}` </div>
)
export default PlayerForm

Answer 3

从App.js导出用户对象，以便在PlayerForm.jsx内使用。

实施例
App.js

export const user = {
  uid: '';
}

<强> PlayerForm.jsx

import { users } from './App.js';

正确引用不同文件/函数中的变量的方法

3 个答案: