Javascript 反应-不重复一个组件

我有以下用于下拉列表的react组件：

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;
    }
});

var UIDropdown=React.createClass({
getDefaultProps:函数（）{
返回{
伊索彭：错
};
},
渲染：函数（）{
如果（此.props.isOpen）{
返回(

{this.props.mapOpacityValues.map（函数（列表，i）{
返回(

);
}，这个）}

);
}
返回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) }

{this.props.mappacityvalues.map（函数（列表，i）{
返回(

);
}，这个）}

示例，但使用单个下拉组件

---

如果我理解正确，您需要重用您的

下拉列表

组件

那就这样做吧

下拉项目组件

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>
        )
    }
});

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;
    }
});

---

在这里，您既不需要重复

下拉列表

也不需要重复

li

项。您只需在实现中重新使用它们。

您能说出哪些不同的数据项吗。fiddle不起作用。你说“我有不同数据的数字”是什么意思？这部分的数字是不是

${list*100}%

？

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