Javascript 在react路由器中创建链接的动态列表

我正在学习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>
    );
}
});

var React=require（'React'）；
var-Router=require（'react-Router'）；
var createReactClass=require（'create-react-class'）；
var-Link=路由器.Link；
var请求=要求（“超级代理”）//Superagent是节点中使用的AJAX API。
var classComp=createReactClass({
request.post（“/getdata”）
.end（函数（err、res）{
如果（err | | |！res.ok）{
log（'Oh no！err'）；
}否则{
var response=JSON.parse（res.text）；
var i；
var pathArr=[]；
var nameArr=[]；
对于（i=0；i

运行应用程序时，会生成列表，但不会显示链接。单击链接时不会发生任何操作。请建议如何更好地解决此问题

---

非常感谢！

更惯用的方法是：

render: function () {
  return (
    <div className="container center-block vlsection1">
      <h1 className="text-center">Videos</h1>
      <div id="vdlist">
        {nameArr.map(name => (
          <div key={name} className="container">
            <div class="text-center"><Link to="play"><h3>{name.toString()}</h3></Link></div>
          </div>
        ))}
      </div>
    </div>
  );
}

在本例中，我已将

nameArr

初始化为空数组。然后在

render

函数中，您可以参考

this.state.nameArr

：

render: function () {
  return (
    <div className="container center-block vlsection1">
      <h1 className="text-center">Videos</h1>
      <div id="vdlist">
        {this.state.nameArr.map(name => (
          <div key={name} className="container">
            <div class="text-center"><Link to="play"><h3>{name.toString()}</h3></Link></div>
          </div>
        ))}
      </div>
    </div>
  );
}

---

完成此操作后，您的React类应该快速高效地更新。这就是React的强大功能，希望您能看到这比重新构建HTML容易得多。相反，您可以只依赖一个

呈现
方法。
正如Rajit在评论中提到的，您尝试访问dom元素这绝对不是一个好主意，也不应该这样做

在React中直接访问dom也是不正确的，因为您将失去React的一些强大工具，如虚拟dom

更好的方法是使用JSX。所谓JSX，我指的是真正的JSX。字符串“looks”和类似于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>
    );
  }
}

import React，{Component}来自'React'；
从“react router dom”导入{Link}；//这里需要使用react router dom
类VideoList扩展组件{
建造师（道具）{
超级（道具）；
this.nameArr=['name1'，'name2']；
}
getVideos（）{
//这将为列表中的每个名称创建一个JSX元素。
返回这个.nameArr.map（name=>{name}）；
}
render（）{
返回(
视频
{this.getVideos（）}
);
}
}
作为旁白，我建议在JS中使用单引号，在HTML中使用双引号-这样您就不需要转义代码：
'
。您是否从“react router dom”导入了{Link}
？您是否获得了`nameArr[m].toString（）的值`，您可以用更多信息更新您的问题吗？您试图在渲染函数中实现一个副作用，副作用是“查找vdlist的#id并破解其内部HTML”。在我看来，最好在
componentDidMount
和/或
componentDidUpdate
中完成。我很惊讶您在运行此操作时没有遇到JS控制台错误。我认为
时不存在#vdlist元素。display（）
运行。React内置了生成HTML的支持，为什么不使用它呢？在这种情况下，您可以从
.display（）返回JSX
和React将在更新
nameArr
时处理更新HTML。你好，拉吉特，谢谢你提供的信息。但是我想告诉你，没有控制台错误，列表也正在填充。这意味着#vdlist已被识别。问题是列表的元素是文本，而不是我希望的链接。Anyways，我将按照您的建议尝试并更新。嗨，Abdeslem，我已更新了问题。如果需要更清晰的说明，请务必通知。抱歉，解决方案与我的相同。请注意，您忘记将class=“text center”更改为className=“text center”在map方法中。这是为了阻止类关键字与javascript类冲突。谢谢，错过了！嗨，Rajit，谢谢你的快速响应和信息。我已经进一步更新了问题。nameArr不是类组件的状态。我使用它从问题中更新的响应中获取数据。作为初学者，我正在使用它g Javascript没有ES6用于react。请建议。MVG_INFINITY_编码器，您的问题已经有了相当大的改变。最初，您的问题是尝试将
.innerHTML
与JSX元素一起使用，现在的问题是
nameArr
仅在异步代码段中可用。我建议lly你应该提交一个新问题，而不是像这样更新。不过，这次我只是想补充一下我的答案。嗨，Larce，谢谢你的快速回复和信息。我已经更新了这个问题，我想告诉你
request.post('/getdata')
  .end(function (err, res) {
    var response;
    var i;
    var nameArr = [];

    if (err || !res.ok) {
      console.log('Oh no! err');
      // NOTE: You should probably set an error in state here:
      // this.setState({ error: '...' });
    } else {
      var response = JSON.parse(res.text);

      // NOTE: .map is an easier way to extract the name here
      nameArr = response.map(function (p) { return p.name });

      // This is where you update your React state.
      this.setState({ nameArr: nameArr });
    }
  });

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