Question

我有一个下拉列表的反应组件：

var UIDropdown = React.createClass({
    getDefaultProps: function () {
        return {
            isOpen: false
        };
    },
    render: function () {
        if (this.props.isOpen) {
            return (
                <div className="dropdown">
                     <ul className="uk-nav uk-nav-dropdown tm-svg-center">
                        {this.props.mapOpacityValues.map(function (list, i) {
                            return (
                                <li onClick={this.props.opacityThermatic.bind(this, list) } key={"list" + i}><a href="javascript:void(0)">{`${list * 100}%`}</a></li>
                            );
                        }, this) }
                         </ul>
                    </div>
            );
        }
        return null;
    }
});

我正在循环输出一些输出一些列表项的数据，但我有一个不同数据项的数字。

如何在组件中添加以下内容而不重复下拉组件代码：

   {this.props.mapOpacityValues.map(function (list, i) {
                                return (
                                    <li onClick={this.props.opacityThermatic.bind(this, list) } key={"list" + i}><a href="javascript:void(0)">{`${list * 100}%`}</a></li>
                                );
                            }, this) }

示例，但只有一个下拉组件 https://jsfiddle.net/zidski/ddLdg84s/

Answer 1

如果我理解正确，您需要重复使用Dropdown组件

然后做这样的事情

DropdownItems组件

var DropdownItems = React.createClass({
    render: function () {
        return(
           <ul className="uk-nav uk-nav-dropdown tm-svg-center">
               {this.props.mapOpacityValues.map(function (list, i) {
                   return (
                      <li onClick={this.props.opacityThermatic.bind(this, list) } key={"list" + i}><a href="javascript:void(0)">{`${list * 100}%`}</a></li>
                   );
                   }, this) 
                }
            </ul>
        )
    }
});

UIDropdown组件

var UIDropdown = React.createClass({
    getDefaultProps: function () {
        return {
            isOpen: false
        };
    },
    render: function () {
        if (this.props.isOpen) {
            return (
                <div className="dropdown">
                    {this.props.children} 
                </div>
            );
        }
        return null;
    }
});

然后您可以创建任意数字UIDropdowns，如

<UIDropdown>
    <DropdownItems mapOpacityValues={someData} opacityThermatic={someFunction}>
</UIDropdown>

此处您不需要重复dropdown或li个项目。你只需在实现中重新启动它们。

反应 - 不重复组件

1 个答案: