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

1 个答案: