如何在单独的 .js 文件上跨 react 应用程序共享变量?

Question

我有一系列应该相互构建的表单，而不必再次提出相同的问题。这类似于 PHP 中的会话变量。

我研究了道具、状态、效果和样式库，但似乎没有任何效果。

另请注意：我将所有创建的 react 应用程序都放在一个 js 文件中(作为 class.extends...，而不是箭头函数 const)，我的函数在另一个 js 文件上，我的 UI 在另一个 js 文件上，都在主目录中。

是否所有内容都必须在 App.js 文件中，或者有没有办法从函数中修改中心变量，即 (App.firstName = this.fname) 或类似于状态：

const reluctantVariableNameToAvoidErrors () => setState( App.firstName ： fname );

这似乎不会引发错误，但单独的导出 const 函数无法读取。

这是它获取信息并调用查询的起始表单(这有效)：

export const home = (props) => (
<div className="App">
<div className="App-header">
<img src={"./dgsl.png"} width={"400px"} alt="logo" />
<br/><h2>Welcome</h2><br/>
<Input id="oldtele" className="w-25" placeholder="Existing Telephone">t</Input><br/>
<Button onClick={() => queryGuest(document.getElementById("oldtele").value)}>I am a Returning Visitor</Button><br/>
<Link href={"./enroll"}  onlyActiveOnIndex>I am a new Guest</Link>
</div>
</div>
);

这调用此函数将信息作为道具或参数发送(我不确定)：

export function queryGuest(ot) {
const telRef = db.collection("guests");
const that = this;
const query = telRef.where("telephone", "==", ot)
.get()
.then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
const fnameR = doc.get("fname");
const lnameR = doc.get("lname");
const teleR = doc.get("telephone");
const employR = doc.get("employer");
const lictypR = doc.get("licType");
const licnoR = doc.get("licNo");
alert(fnameR + " " + lnameR + " found in system.");
let set = () => this.setState({fname: fnameR});
set = () => this.setState({lname: lnameR});
set = () => this.setState({tele: teleR});
set = () => this.setState({employ:employR});
set = () => this.setState({licTyp:lictypR});
set = () => this.setState({licNo:licnoR});
questions(fnameR);
window.location.href = "./questions";
})
});
}

应该在应用程序中更改此处的变量：

从"./页面"导入{主页，新客人，谢谢，问题};

class App extends React.Component {
constructor(props) {
super(props);
const [state, setState] = useState({
fname: "na",
lname: "na",
tele: "na",
employ: "na",
resid: "na",
room: "na",
reason: "na",
instr: "na",
nextvis: "na",
nodays: "na",
cov: "na",
lictype: "na",
licno: "00"
});
}
render() {
return (
<Router history={browserHistory}>
<Route path="/" component={home}/>
<Route path="/enroll" component={newguest}/>
<Route path="/thanks" component={thankyou}/>
<Route path="/questions" component={questions}/>
</Router>
);
}
}

然后稍后可以在此处检索，而无需重新输入并作为参数传递：

export function addVisit() {
//disburses all state variables to the visits table in db
db.collection("visits").add({
date: Date.now.toString(),
guestfname: this.state.fname,
guestlname: this.state.lname,
telephone: this.state.tele
}).then(r => r => window.location.href = "./thanks");
}

那么我需要一些特殊的库，或者我需要做挂载生命周期，或者我应该尝试将其设计为非常单向的，以便他们必须在同一页面上输入所有内容并将其从一个函数发送到另一个函数？

此外，是否应该将其设置为将函数作为 return() 附加到呈现的 UI ？我喜欢将它们分开，但我在网上看到的所有内容都附有它们。

谢谢！

Answer 1

首先，您在类组件中使用useState。你不能这样做，钩子是用于函数组件的，类组件有this.state和this.setstate。对于跨多个文件共享状态，您可能需要查看上下文 API。您将在应用中定义您的状态，并将您作为所有其他组件的父级的Context.Provider的值传递给该状态。在函数组件中，可以使用useContext挂钩访问状态

Answer 2

所以事实证明有一些解决方案，最简单的是useState。

这是通过在 App 中实例化状态来完成的.js然后将状态变量及其变更函数传递给需要它的每个组件。这些函数反过来将调用回其源。

例：

const App = () => {
const [cars, setCars] = useState({object or array});
return(
<Router>
<Route path='/make'><makeCars carslist={cars} changecars={setCars}/>{</Route>
<Route path='/viewonly'><viewCars carslist={cars}/></Route>
</Router>
)
}

然后在您要访问它的另一个函数中：

export const makeCars = ({ changeCars, carslist }) => {
//make the 'cars' object in App.js become equal to "corvette"
changeCars("corvette");
}