在react-router中创建动态链路列表
我正在学习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>
);
}
});当我运行应用程序时，生成了列表，但没有显示链接。也就是说，当我单击这些链接时，不会发生任何操作。请建议我如何以更好的方式处理这个问题。
非常感谢!
回答 3
Stack Overflow用户
发布于 2018-03-19 11:55:56
正如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>
);
}
}Stack Overflow用户
发布于 2018-03-19 11:49:24
一种更惯用的方式：
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>
);
}仅供参考，您不能在.innerHTML中使用仅限JSX的元素(如<Link/>)。
EDITExplanation: React是为了更容易管理动态网页而构建的，它本质上取代了使用.innerHTML之类的东西。如果你正在使用React，并且发现自己在尝试使用.innerHTML，那么你很可能走错了方向。
任何可以确定的大写元素都不是原始的HTML元素，而是React组件。如果是这种情况，那么使用它的适当位置是在JSX块中(如果您愿意，也可以直接作为React组件使用)。因此，<Link/>、<Router/>和任何其他以大写字母开头的标签。
我所做的是将一块JavaScript添加到.render JSX中，它映射到nameArr数组上，并生成您试图从.display方法生成的代码。正如您所看到的，您可以通过将任意JavaScript放在{}大括号之间来将其插入到JSX中。
EDITto answer更新了问题:您的nameArr变量只在.end()函数中可用，所以您当然不能在render函数中访问它。React为这种情况提供了一个功能！反应状态！你可以阅读更多关于State and Lifecycle的内容。
在这种情况下，您需要做的就是初始化类的某个状态，然后在接收到新数据时对其进行更新。使用ES6之前版本的方式初始化状态的方法是在createReactClass参数中添加一个getInitialState键：
getInitialState: function() {
return { nameArr: [] };
},在本例中，我将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>
);
}一旦你这样做了，如果我们不在任何地方更新它，它将总是空的。为了更新它，我们调用this.setState({ ... })。下面是它对请求调用的工作方式：
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 });
}
});一旦你做到了这一点，你的React类应该会快速有效地更新。这就是React的强大之处，希望您能看到这比尝试重新构建HTML要容易得多。相反，您可以只依赖一个render方法。
Stack Overflow用户
发布于 2022-01-26 16:36:53
您可以尝试Anchor，然后链接组件，如下所示：
<Anchor>
<Link to={`crew/${crew._id}`}> {`${crew.name}`}</Link>
</Anchor>https://stackoverflow.com/questions/49361889
复制
腾讯云开发者
