在React中实例化Vanilla JS类

Question

对于我的生活，我自己找不到答案......

我有 PURE JAVASCRIPT CLASS ，它实例化以创建cookie。但是，我不确定如何在React 中实例化一个vanilla JS类。

在那里，最好将实例分配给组件的状态吗？或者我可以避免吗？

此外，将课程作为道具传递似乎没有意义。

这是我尝试做的一般结构：

"Cookies" (Van. JS Class) ---> "new Cookies()" in "Root.jsx" (React Component)

道歉，如果这看起来很简陋的话。我是React的新手。

先谢谢你的帮助！

-CookieMonster

以下是我在想的内容......

Cookies类     从＆＃39; js-cookie＆＃39;;

导入Cookie

export default class Cookies {
constructor(){
    this.cookieName='hadTreatment';
    this.cookieVal='';
}

initCookie() {
    if (getCookie() == '') {
        setCookie('true');
    } else {
        cookieVal = '';
    }
}

setCookie(cv) {
    Cookies.set(cookieName, cv, { expires: 7 });
}

getCookie() {
    console.log(Cookies.get(cookieVal));
    return Cookies.get(cookieName);
}

}

(Abridged) "Root" Component Class
class Root extends Component {
componentDidMount() {
    console.log(this.state.oddDialogLen);
    this.handleCookies();
}
 handleCookies(){
    let c = (this.state.cookies instanceof CookieMonster) ? this.state.cookies : new CookieMonster();
    this.setState({
        cookies: c
    });
}

render() {

    if(this.state.renderDrip == true && this.state.cookies.getCookie == ''){
        return (
            <Story updateRenderDrip={this.updateRenderDrip} />
        )
    }
    return (<Home />)
    }

Answer 1

类只是特殊的函数，在实例化它们时就是在创建新对象。根据您需要做的事情，您可以将它们存储为状态并将其作为道具传递，将它们破坏为原始状态变量，或者使用类似Redux的东西而不是处理它们。

React主要是一个视图库，您可以保留有关应用程序UI状态的数据。但是，只要流程不太复杂，您可以存储有关应用程序逻辑的其他一些数据。如果你可以发布你的Cookie类或详细说明它包含什么，我可能会帮助你更好。通过破坏原始变量我的意思是这样的：让我们说你的cookie有一个名字和一个到期日期。您可以存储名为cookie: new Cookie(cookie)的状态变量或更好的两个变量：cookieName: cookie.name，cookieExpirationDate = cookie.expirationDate。或者甚至更好，你可以检查特定的cookie并在你的consturctor中检查它的到期日期，并根据结果设置一个布尔状态变量hasVisitedBefore。