反应-不重复组件

Question

I have the following react component for a dropdown:

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

I'm looping through some data which outputs some list items, but I have a number for different data items.

How can I add the following in the component without repeating the dropdown component code:

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

Example but with a single dropdown component https://jsfiddle.net/zidski/ddLdg84s/

Answer 1

If I understand you correctly, you need to reuse your Dropdown component

Then do something like this

DropdownItems component

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 component

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

Then you can create any number UIDropdowns like

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

Here you need to repeat neither dropdown nor li items. You just resue them in your implementation.