javascript - 在react-router中创建动态链接列表

Question

我正在学习react-router，我需要解决以下问题的帮助:

我正在迭代一个名为 nameArr 的字符串数组。我想使用react-router 创建字符串的可点击链接列表，以便每个链接都可以通过route.js 中定义的路线进行导航。

数组 nameArr 是根据服务器创建的响应填充的。

以下代码重点介绍创建列表并将其应用到 JSX。

var React = require('react');
var Router = require('react-router');
var createReactClass = require('create-react-class');
var Link = Router.Link;  
var request = require('superagent'); //Superagent is an AJAX API used in Node.

var classComp = createReactClass({

request.post('/getdata')
        .end(function (err, res) {
            if (err || !res.ok) {
                console.log('Oh no! err');
            } else {
                var response = JSON.parse(res.text);
                var i;
                var pathArr = [];
                var nameArr = [];

                for (i = 0; i < response.length; i++) {
                    pathArr[i] = response[i].videourl;
                    nameArr[i] = response[i].name;
                }
var displayItem = "<div className=\"container\">";

                for (var m in nameArr) {
                  displayItem += "<div class='text-center'><Link to='play'><h3>" + nameArr[m].toString() + "</h3></Link></div>";
                }

                displayItem += "</div>";
                document.getElementById("vdlist").innerHTML = displayItem;
}

render: function () {
    return (
        <div className="container center-block vlsection1">
            {this.display()}
            <h1 className="text-center">Videos</h1>
            <div id="vdlist">

            </div>
        </div>
    );
}
});

当我运行应用程序时，会生成列表，但未显示链接。当我单击链接时，不会发生任何操作。请建议我如何以更好的方式解决这个问题。

非常感谢!

Answer 1

正如 Rajit 的评论中已经提到的，您尝试在渲染函数中访问 dom 元素。这绝不是一个好主意，也不应该这样做。

在 React 中直接访问 dom 也不是正确的方式，因为你会失去一些强大的 React 工具，比如虚拟 dom。

更好的方法是使用 JSX。我所说的 JSX 是指真正的 JSX。 “看起来”像 JSX 的字符串和实际的 JSX 之间存在差异。您尝试做的是创建一个内部包含 JSX 的字符串。然后，使用innerHTML 属性将此字符串添加到dom 中。然而，您的 JSX 不会真正被当作 JSX 来处理。它只会像 HTML 一样处理它 - 并且 HTML 中没有 元素。这就是您看不到这些项目的原因。

而是这样做:

import React, { Component } from 'react';
import { Link } from 'react-router-dom'; // You need to use react-router-dom here

class VideoList extends Component {
  constructor(props) {
    super(props);
    this.nameArr = ['name1', 'name2'];
  }

  getVideos() {
    // This creates a JSX element for every name in the list.
    return this.nameArr.map(name => <div className="text-center"><Link to="play"><h3>{name}</h3></Link></div>);
  }

  render() {
    return (
      <div className="container center-block vlsection1">
        <h1 className="text-center">Videos</h1>
        {this.getVideos()}
    </div>
    );
  }
}