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

您可以通过道具传递链接，就像您的item.text

一样

在List类中：

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

希望这有帮助。

什么是“单一物品”的反应方式？

1 个答案: