Блог

Главная - Вопросы по программированию - Обратный URL React JSX и Django

Обратный URL React JSX и Django

#djan&o #reactjs #djan&o-models #react-jsx

#djan&o #djan&o-модели #reactjs

Вопрос:

Я пытаюсь создать некоторое меню с помощью React, и мне нужны некоторые обратные URL Djan&o в этом меню. Возможно ли получить тег URL djan&o внутри JSX? Как это можно использовать?

 render: function() {
    return <div&&t;
        <ul className={"myClassName"}&&t;

            <li&&t;<a href="{% url 'my_revese_url' %}"&&t;Menu item</a&&t;</li&&t;

        </ul&&t;
    </div&&t;;
}

Ответ №1:

Вы могли бы создать тег script на своей странице, чтобы вводить значения из Djan&o в массив.

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

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

 <MyMenu items={menuItems}&&t;</MyMenu&&t;

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

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

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

Комментарии:

1. Спасибо @Soviut, а затем в рендеринге просто <a href={this.props.items[0].url}&&t;{this.props.items[0].title}</a&&t; или что?

2. Да, или вы могли бы «зацикливаться» для создания элементов с помощью map() функции. Я обновил свой ответ, чтобы показать метод сопоставления.