React JSX 和 Django 逆向 URL

Question

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

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>;
}

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

React JSX 和 Django 逆向 URL

React JSX and Django reverse URL

django

django-models

reactjs

react-jsx