Реагируйте на обратный URL JSX и Django

Question

Я пытаюсь создать какое-то меню, используя React, и мне нужно несколько обратных ссылок Django в этом меню. Возможно ли получить тег django url внутри JSX? Как это можно использовать?

render: function() {
    return <div>
        <ul className={"myClassName"}>

            <li><a href="{% url 'my_revese_url' %}">Menu item</a></li>

        </ul>
    </div>;
} 

Answer 1

Вы можете создать скрипт скрипт на своей странице, чтобы вставить значения из Django в массив.

<script>
  var menuItems = [
    {title: 'Menu Item', url: '{% url "my_reverse_url" %}'},
    {title: 'Another Item', url: '{% url "another_reverse_url" %}'},
  ];
</script>

Затем вы можете передать массив в меню через свойство.

<MyMenu items={menuItems}></MyMenu>

Затем зациклите его, чтобы создать элементы списка в вашем render метод.

render: function(){ 
  var createItem = function(itemText) {
    return <li>{itemText}</li>;
  };
  return <ul>{this.props.items.map(createItem)}</ul>;
}

Это будет держать ваш компонент отделенным и многократно используемым, потому что логика для создания данных и логика для отображения элементов списка хранятся отдельно.