如何读取数据并将其 return 结构化为列表

Question

我想传递数据来创建一个列表，我正在学习反应，将来我将不得不准备这样的结构，但是从服务器的 JSON 中读取。这在一个奇怪的 mod:

中工作

return (
    <div className="aui-subnavbar-element-container">
        <nav>
            <ul>
                <li>{(ItemData)}</li>
                <Dropdown />
                <li className="dropdown-closed"><a href="#">Aplicaciones</a></li>
            </ul>
        </nav>
    </div>

var Mainlistdata = React.createClass({

    render: function() {

        var ItemData = [
            {title: 'Inicio', url: '#'},
            {title: 'Ventas', url: '#'},
            {title: 'Gastos', url: '#'},
            {title: 'Invitar a mis amigos', url: '#'}
        ];

    return (
        <div className="aui-subnavbar-element-container">
            <nav>
                <ul>
                    <li>{(ItemData)}</li>
                    <Dropdown />
                    <li className="dropdown-closed"><a href="#">Aplicaciones</a></li>
                </ul>
            </nav>
        </div>
        );
    }

});

module.exports = Mainlistdata;

我想获取这样的数据：

    <div className="aui-subnavbar-element-container">
        <nav>
            <ul>
                <li><a href={url}>{title}</a></li>
                <Dropdown />
                <li className="dropdown-closed"><a href="#">Aplicaciones</a></li>
            </ul>
        </nav>
    </div>

谢谢

Answer 1

而不是这个：

<li>{(ItemData)}</li>

你应该这样做：

<ul>
  {ItemData.map(function (item) {
    return <li><a href={item.url}>{item.title}</a></li>;
  })}
</ul>

如何读取数据并将其 return 结构化为列表

how to read a data and return it structured in a list

javascript

reactjs