假设我们有一个正在迭代的项目列表
var React = require('react');
var ListItem = require('./ListItem.jsx');
var itemsList = [...]
var List = React.createClass({
render: function() {
var listOfItem = itemsList.map(function(item) {
return <ListItem key={item.id} text={item.text} />;
});
return (
<ul>{listOfItems}</ul>
);
}
});
module.exports = List;
然后我们就有了单个项目:
var React = require('react');
var ListItem = React.createClass({
render: function() {
return (
<li>
<a href={Open THIS Specific Item}>{this.props.text}</a>
</li>
);
}
});
module.exports = ListItem;
让我们假设这个单个项目是一个链接,它将带我到该特定项目的详细页面。
我们将如何做到这一点?
最佳答案
您可以通过 props 传递链接,就像您的 item.text
在您的列表类中:
var List = React.createClass({
render: function() {
var listOfItem = itemsList.map(function(item) {
return <ListItem key={item.id} text={item.text} url={item.url} />;
});
return (
<ul>{listOfItems}</ul>
);
}
});
然后,在您的 ListItem 类中:
var ListItem = React.createClass({
render: function() {
return (
<li>
<a href={this.props.url}>{this.props.text}</a>
</li>
);
}
});
希望这有帮助。
关于javascript - 'Single Item' 的 React 方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38228720/