javascript - 'Single Item' 的 React 方式是什么？

Question

假设我们有一个正在迭代的项目列表

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;

让我们假设这个单个项目是一个链接，它将带我到该特定项目的详细页面。

我们将如何做到这一点？

Answer 1

您可以通过 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>
        );
    }
});

希望这有帮助。