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

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