Django and Reactjs: сложные шаблоны

Я искал этот вопрос некоторое время и до сих пор не совсем ясен. Что вы используете для создания шаблонов для приложения Django с помощью Reacjs? Как вы показываете разные меню для авторизованных и неавторизованных пользователей? Возможно ли сохранить html-макет в .html-файле и просто визуализировать компоненты Reactjs в необходимых местах? Как общаться между этими компонентами?Django and 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>

Если пользователь не авторизован я показывать кнопку «Login» в нем, в противном случае есть две кнопки: «Выход» и «Добавить элемент». Когда я нажимаю кнопку «Добавить элемент», мне нужно открыть модальное окно с формой. На отправке формы я хочу добавить элемент в список <ul>. Это просто пример, страница может содержать много разметки html. Вопросы выше.

Пожалуйста, спросите в комментариях, если мой вопрос не ясен.

источник

2016-02-02 tony

Я думаю, вы немного смущены, если вы используете реакцию (или любую другую структуру 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 and Reactjs: сложные шаблоны

ответ

Смежные вопросы