Question

我正在尝试将选项传递到我的下拉组件中。我在线查看了一些示例，但它们似乎显示了嵌入到下拉列表中的列表项。我是新手做出反应所以可能无法正确理解它，但这种做法会使其不那么重复使用。

这是我尝试这样做的。

main.jsx

var options = {
    dropdownOptions: [{
        value: 1, text: 'One', url: 'http://One.com'
    },{
        value: 2, text: 'Two', url: 'http://One.com'
    },{
        value: 3, text: 'Three', url: 'http://One.com'
    }]
}

module.exports = React.createClass({
    render: function(){
        return <div>
            <Dropdown title="Hello" />
        </div>
    }
});

dropdown.jsx

module.exports = React.createClass({
    render: function() {
        var list = this.props.dropdownOptions.map(function(dropdownProps){
            return <li>{...dropdownProps}</li>
        });
        return <div className="dropdown">
            <button className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                {this.props.title}
                <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
                {list}
            </ul>
        </div>
    }
});

Answer 1

感谢受到评论的人们的工作。

main.jsx

var React = require('react');

var Dropdown = require('./../components/dropdowns/dropdown');

var dropdownOptions = [{
        value: 1, text: 'One', url: 'http://One.com'
    },{
        value: 2, text: 'Two', url: 'http://One.com'
    }, {
        value: 3, text: 'Three', url: 'http://One.com'
}]


module.exports = React.createClass({
    render: function(){
        return <div>
            <Dropdown title="Hello" dropdownOptions={dropdownOptions}/>
        </div>
    }
});

dropdown.jsx

module.exports = React.createClass({
    render: function() {
        var list = this.props.dropdownOptions.map(function(dropdownProps, i){
            return <li {...dropdownProps} key={i}>{dropdownProps.text}</li>
        });
        return <div className="dropdown">
            <button className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                {this.props.title}
                <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
                {list}
            </ul>
        </div>
    }
});

传入React中的下拉选项

1 个答案: