如何在单独的.js文件上的React应用程序中共享变量？

如何解决如何在单独的.js文件上的React应用程序中共享变量？

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

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

还请注意：我将所有我的create react app都创建为一个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";

            })
        });
}

应在App中更改变量：

从“ ./pages”导入{主页，新来宾，谢谢，问题}；

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？我喜欢将它们分开，但是我在网上看到的所有内容都附有它们。

谢谢！

解决方法

首先，您在类组件中使用useState。您不能这样做，钩子用于功能组件，类组件具有this.state和this.setstate。要在多个文件之间共享状态，您可能需要查看context API。您可以在应用程序中定义状态，并将该状态的Context.Provider值传递给您，该值作为所有其他组件的父级。在功能组件中，您可以使用useContext钩子

访问状态 ,

因此事实证明，有几种解决方案，最简单的方法是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");
}