下拉菜单在每次单击时重新呈现所有下拉菜单项

环境

• 反应16.0.0

形势

UncontrolledDropdown --> DropdownToggle --> DropdownMenu --> DropdownItem . 对于 DropdownItem DropdownToggle 下拉项 DopdownItem ,并传递给 下拉开关 作为道具。

我用了两种不同的方式来做这件事,但结果都是一样的。每当我点击 从下拉列表中,它们都被重新渲染了,我不明白为什么。你已经超过500个了 DropdownItems

代码

export default class Father extends React.Component {
    ...
getDropdown = () => {
        const dropdownItems = this.state.retailers.map(retailer => {
            console.log("rendering");
            return <Di key={retailer} retailer={retailer} active={false} itemClick={this.setRetailer} />
        });
        return (
            <UncontrolledDropdown size="lg" className="dropdown-pim">
                <DropdownToggle tag="h3" className="dropdowntoggle-pim text-left" caret={false}>
                    {this.state.retailer} <i className="fa fa-angle-down"></i>
                </DropdownToggle>
                <DropdownMenu className="rounded">
                    {dropdownItems}
                </DropdownMenu>
            </UncontrolledDropdown>
        );
    }

}

class Di extends React.Component {

    handleClick = () => {
        this.props.itemClick(this.props.retailer);
    }

    render() {
        return (<DropdownItem onClick={this.handleClick}
                              active={this.props.active}
                              className="btn-pim rounded">
            {this.props.retailer}
        </DropdownItem>);
    }
}

方案B

getDropdown = () => {
        const dropdownItems = this.state.retailers.map(retailer => {
            console.log("rendering");
            return (<DropdownItem onClick={() => {this.setRetailer(retailer)}}
                                  active={false}
                                  className="btn-pim rounded"
                                    key={retailer}>
                    {retailer}
                    </DropdownItem>);
        });
        return (
            <UncontrolledDropdown size="lg" className="dropdown-pim">
                <DropdownToggle tag="h3" className="dropdowntoggle-pim text-left" caret={false}>
                    {this.state.retailer} <i className="fa fa-angle-down"></i>
                </DropdownToggle>
                <DropdownMenu className="rounded">
                    {dropdownItems}
                </DropdownMenu>
            </UncontrolledDropdown>
        );
    }

在两个编码选项中,“rendering”消息出现一次,这很好,第一次出现,但是每次我单击其中一个 Di