Question

您好我正在尝试将<li>元素映射到我的<ul>列表。

makelist: function () {
    var self = this;
    return _.map(this.state.files, function (val) {
        return React.createElement('li', { key: val.id }, React.createElement('p', { className: bgSuccess }, val.name, ' ', delButton), progressBar, errorDiv);

    });
},

在我的回复声明中，我正在调用方法：

return (
        <div className='file-input-controls'>
            <ul className='file-input-list'>
                {this.list()}
            </ul>
            <TableActionButtons {...actionButtonsOptions} />
        </div>
    );

显然，ul无论如何显示，如果有列表项，我怎么才能显示列表？

由于

Answer 1

您可以在实际创建ul之前检查列表项的大小。

var ul = null;
var items = this.makelist();
if (items.length > 0) {
    ul = (
        <ul className='file-input-list'>
            {items}
        </ul>
    );
}

return (
    <div className='file-input-controls'>
        {ul}
        <TableActionButtons {...actionButtonsOptions} />
    </div>
);

React Js在列表中呈现列表项元素

1 个答案: