React JSX和Django反向URL [英] React JSX and Django reverse URL

问题描述

我正在尝试使用React构建一些菜单，并且此菜单中需要一些Django反向网址。是否有可能在JSX中获取django url标签？

I'm trying to build some menu using React and need some Django reverse urls in this menu. Is it possible to get django url tag inside JSX? How can this be used?

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

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

        </ul>
    </div>;
} 

推荐答案

您可以创建脚本标签

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

然后可以通过属性将数组传递到菜单中。

You could then pass the array into the menu through a property.

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

然后在其上循环以在渲染器中创建列表项方法。

Then loop over it to create the list items in your render method.

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

这将使您的组件保持解耦和可重用，因为创建数据的逻辑和显示列表项的逻辑是分开的。

This will keep your component decoupled and reusable because the logic for creating the data and the logic for displaying the list items is kept separate.

这篇关于React JSX和Django反向URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！