Question

我是React beginer，我想用React创建一个Dropdown，所以我做了以下代码：

模块dropdown.js

var React = require('react');

var DropdownItemWrapper = React.createClass({
    render: function() {
        console.log("listItems.map")
        return React.createElement(
            'li',
            null,
            this.props.itemdata
        );
    }
});

var Dropdown = React.createClass({

    displayName:'Dropdown',

    render: function(){

        return React.createElement(
            "div",
            {className:this.props.className},
            React.createElement(
                'button',
                {className:'btn btn-primary dropdown-toggle', 'type':'button', 'data-toggle':'dropdown'},
                this.props.title,
                React.createElement(
                    'span',
                    {className:'caret'}
                )
            ),
            React.createElement(
                'ul',
                this.props.listWrapperAttr,
                this.props.listItems.map(function(result) {
                    React.createElement(DropdownItemWrapper, {itemdata:result});
                })
            )
        );
    }
});

module.exports = {
    create: React.createFactory(Dropdown),
    Dropdown: Dropdown
};

然后我在前端抓住它：

var React = require('react');
var dropdown = require('../base/dropdown');
// DROPDOWN
React.render(dropdown.create({
    title: 'Auswahl Dropdown',
    className: 'dropdown',
    listWrapperAttr: {className:'dropdown-menu'},
    listItems:['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
}), document.getElementById('react-dropdown'));

但最后在下拉菜单中没有列表项，但没有错误消息。 DropdownItemWrapper don #T给予回报。

Answer 1

您没有从.map函数返回，这就是您没有看到任何项目的原因。

至于为什么你没有看到错误是因为任何返回null，undefined，false或空数组React的东西都会跳过渲染该输出。

this.props.listItems.map(function(result) {
    return React.createElement(DropdownItemWrapper, {itemdata:result});
})

使用多个组件的React / Dropdown不显示子项

1 个答案: