Django和Reactjs：複雜的模板

我一直在尋找這個問題一段時間，仍然不是很清楚。你用什麼方法爲使用Reacjs的Django應用程序構建模板？如何爲授權用戶和非授權用戶顯示不同的菜單？是否可以保持.html文件中的html佈局，並只需要渲染Reactjs組件？如何在這些組件之間進行通信？Django和Reactjs：複雜的模板

這裏有一個例子：

我有這樣一個頁面，菜單，然後項目的清單：

<body> 
    <div> 
     {% if not user.authenticated %} 
      <a href="/login">Login</a> 
     {% else %} 
      <a href="/logout">Logout</a> 
      <a href="#">Add item</a> 
     {% endif %} 
    </div> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
    </ul> 
</body>

如果用戶未授權我顯示一個按鈕「登錄」，否則有兩個按鈕：「註銷」和「添加項目」。當我點擊「添加項目」按鈕時，我需要打開窗體的模態窗口。在表單提交中，我想將項目追加到<ul>列表中。這只是一個例子，頁面可以包含很多html標記。上面的問題。

如果我的問題不清楚，請在評論中提問。

來源

2016-02-02 tony

我覺得你有點困惑，如果你正在使用react（或任何其他js框架的單頁應用程序），你不應該使用django模板渲染一些部分（即使你可以）。顯示或不顯示登錄的邏輯應該在反應模板中，而不是在django模板中。例如： Django的模板

<head> 
<script> 
var userInfo = { 
    authenticated : {% user.authenticated %} 
    // add anyother user info 
} 
</script> 
<head> 
<body> 
    <div id="app"/> 
</body>

JS應用：

var React = require("react"); 
var Component = require("./components/Login"); 

function render(element, id) { 
    React.render(<Login/>, document.getElementById(id)); 
} 

render(Component, "app");

登錄：

var React = require("react"); 

var Login = React.createClass({ 

    renderLogin: function() { 
    var loginButton; 
    if (userInfo.authenticated) { 
     loginButton = <LogoutButton />; 
    } else { 
     loginButton = <LoginButton />; 
    } 
    return loginButton; 
    } 


    render: function() { 
    return (
     <div className="Login"> 
     {renderLogin} 
    </div> 
     </div> 
    ); 
    } 
}); 

module.exports = Login;

我wound't從任何剛剛訪問全局變量反應組件，而我將訪問它來自根組件，然後通過道具或上下文將其傳播到子組件。

來源

2016-02-02 13:35:59

Django和Reactjs：複雜的模板

回答

相關問題