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

Question

我有一系列的表格应该相互建立，而不必再问同样的问题。 这类似于 PHP 中的会话变量。

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

另请注意：我所有的 create react 应用程序都是一个 js 文件（作为 class.extends ...，而不是箭头函数 const），我在另一个 js 文件上的函数，以及我在另一个 js 文件上的 UI 都在主文件中目录。

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

常量不情愿变量名避免错误() => 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 上？ 我喜欢把它们分开，但我在网上看到的所有东西都附有它们。

谢谢！

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