在react.js中爲組件設置cookie

我已閱讀此文章How can I do to set cookie in the react code?關於在reactjs代碼中設置cookie，但是，我無法使用任何庫，我可以使用的只是javascrip。現在，我想要實現的第一次訪問時出現一個歡迎框。我所做的和測試的是：1.歡迎框，它是jsx中的組件編碼; 2. js中的cookie編碼。這兩個子部分都經過測試，但是，當我試圖將這兩部分組合到一個組件中時，它不起作用。在react.js中爲組件設置cookie

var Child = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="container"> 
 
     <p>Welcome to our website</p> 
 
     <button onClick={this.props.onClick}>Click me to close</button> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var ShowHide = React.createClass({ 
 
createCookie(name,value,days) { 
 
\t if (days) { 
 
\t \t var date = new Date(); 
 
\t \t date.setTime(date.getTime()+(days*24*60*60*1000)); 
 
\t \t var expires = "; expires="+date.toGMTString(); 
 
\t } 
 
\t else var expires = ""; 
 
\t document.cookie = name+"="+value+expires+"; path=/"; 
 
}, 
 

 
readCookie(name) { 
 
\t var nameEQ = name + "="; 
 
\t var ca = document.cookie.split(';'); 
 
\t for(var i=0;i < ca.length;i++) { 
 
\t \t var c = ca[i]; 
 
\t \t while (c.charAt(0)==' ') c = c.substring(1,c.length); 
 
\t \t if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
 
\t } 
 
\t return ""; 
 
}, 
 

 
eraseCookie(name) { 
 
\t createCookie(name,"",-1); 
 
}, 
 

 
firstVisit() { 
 
    var isFirstVisit; 
 
\t var result = readCookie('firstVisit'); 
 
    if (result == "") { 
 
     createCookie('firstVisit', 'true', 365); 
 
     isFirstVisit = true; 
 
\t \t return isFirstVisit; 
 
    } 
 
    else { 
 
\t \t isFirstVisit = false; 
 
\t \t return isFirstVisit; 
 
\t } 
 
}, 
 
    
 
getInitialState: function() { 
 
    if(firstVisit()) { 
 
     return { childVisible: true }; 
 
    } 
 
    else 
 
    { 
 
     return { childVisible: true }; 
 
    } 
 
}, 
 

 
onClick: function() { 
 
    this.setState({childVisible: !this.state.childVisible}); 
 
}, 
 
    
 
    render: function() { 
 
    return(
 
     <div> 
 
     { 
 
      this.state.childVisible 
 
      ? <Child onClick={this.onClick} /> 
 
      : null 
 
     } 
 
     </div> 
 
    ) 
 
    }, 
 
}); 
 
    
 
React.render(<ShowHide />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

來源

2017-06-04 宗天博

您是否絕對需要使用cookie？可能更容易使用'localStorage'。 –

如果這樣做，你能給我一些指導或相關文章，謝謝。 –

或者cookie的，你可以使用localStorage。這是一個基本的例子。一旦安裝了主要組件，它將在存儲中設置一個項目，並對render()方法中的項目做出反應。

componentDidMount() { 
    // Get item from localStorage and save it to a constant. 
    const hasVisitedBefore = localStorage.getItem('hasVisitedBefore'); 

    // Check if the user has visited the site (component) before. 
    if (!hasVisitedBefore) { 
    // If not, set the component state (or dispatch an action if you need) 
    // Also set the localStorage so it's globally accessible. 
    this.setState({ hasVisitedBefore: false }); 
    localStorage.setItem('hasVisitedBefore', true); 
    } 
} 

// Based on the state set in `componentDidMount()`, show or hide the welcome modal. 
render() { 
    return (
    <div> 
     {this.state.hasVisitedBefore 
     ? 'Welcome back!' 
     : 'Welcome for the first time!'} 
    </div> 
); 
}

Working demo on JSFiddle。

在其他組件中，您可以只檢查localStorage.getItem('hasVisitedBefore')並基於此進行渲染。

來源

2017-06-04 13:16:46

我非常感謝您的幫助，現在，我已經實現了我需要做的事情。 –

在react.js中爲組件設置cookie

回答

相關問題