Django/ReactJS 如何将 django url 添加为道具？答案

【问题标题】：Django/ReactJS how to add django urls as props?Django/ReactJS 如何将 django url 添加为道具？
【发布时间】：2018-10-20 15:05:26
【问题描述】：

请记住，我对 react/django 完全陌生，我需要我能获得的所有帮助。

我想用 React 在我的应用程序中创建一个导航栏组件。问题是导航栏有指向应用程序其他部分的链接。
我想要做的是将一个包含所有链接的数组作为道具传递给我的导航栏组件。但是如何动态获取 javascript 中的链接呢？

现在我有这个：

index.js：

let navbarUrls = [
  {key: 0, url: "{% url 'main:index' %}"}
];

ReactDOM.render(<Navbar urls={navbarUrls} />, document.getElementById('navbar'));

Navbar.js：

import React, {Component} from 'react';

class Navbar extends Component {
    render() {
        return (
            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                   {this.props.urls.map(url => (
                      <a class="navbar-brand" key={url.key} href={url.url}>Main Page</a>
                    ))}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <div class="navbar-brand">
                        <div id="current-time">
                        </div>
                    </div>
                </div>
            </nav>
        )
    }
}

export default Navbar

创建元素时，链接当然不是，因为它不识别树枝......也许我这样做完全错了？有人可以指导我正确的方式吗？？

【问题讨论】：

标签： javascript django reactjs

【解决方案1】：

我正在使用 React 和 Django。我也遇到过类似的问题。

const navbarUrls = [
        {title: 'TAB-1', path: ''},
        {title: 'TAB-2', path: 'tab2'},
        {title: 'TAB-2', path: 'tab3'},
    ];

假设这些是你的链接

现在创建一个导航栏组件。

import React, {Component} from 'react';
import {Link} from 'react-router-dom'; // install react-router and react-router-dom version 4.x

class Navbar extends Component {

    render() {
        return (
            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                   {this.props.navbarUrls.map(link => (
                      <Link to={link.path}>{link.title}</Link>
                    ))}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <div class="navbar-brand">
                        <div id="current-time">
                        </div>
                    </div>
                </div>
            </nav>
        )
    }
}

export default Navbar

现在你的index.jsx

import * as React from 'react';
import * as ReactDOM 'react-dom';
import {Route, HashRouter, Switch, Redirect} from 'react-router-dom';
import Navbar from 'your-path';


    ReactDOM.render(
       <HashRouter> // you can use BrowserRoute as well.
          <Navbar urls={navbarUrls} />
               <Switch>
                    <Route extact path="/" component={YourComponent1}/>
                    <Route path="/tab2" component={YourComponent2}/>
                    <Route path="/tab2" component={YourComponent2}/>
                </Switch>
        </HashRouter>,
      document.getElementById('app')); //id from your main html page.

不熟悉的请阅读react-routerhttps://github.com/ReactTraining/react-router的文档。

【讨论】：