reactjs - DropdownMenu 在每次点击时重新呈现所有下拉项

问题描述

环境

反应 16.0.0
反应带 5.0.0

情况

我正在使用组件UncontrolledDropdown --> DropdownToggle --> DropdownMenu --> DropdownItem。对于DropdownItem我需要向它传递一个函数，以便它改变其父亲的状态（这是它自己的道具值）。这是因为我希望DropdownToggle元素显示 selected 的值DropdownItem。为此，父组件保存 selected 的值，并将其作为道具DopdownItem传递给。DropdownToggle

我以两种不同的方式做到了这一点，但最终都处于相同的情况。每当我DropdownItem从下拉列表中单击其中一个时，它们都会被重新渲染，我不明白为什么。请注意，该列表超过 500 个DropdownItems，并且重新渲染给它带来了一点点延迟。

代码

选项 A

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

我这样做的原因之一是避免必须创建多个箭头函数才能传递“handleClick”一个值。这就是我最终在选项 B 中所做的。

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

在这两个编码选项中，“渲染”消息都会出现一次，这很好，第一次，但是每当我单击其中一个时Di，它都会再次重新渲染。这是应该发生的事情吗？我不确定我做错了什么。

标签： reactjsbootstrap-4reactstrap

reactjs - DropdownMenu 在每次点击时重新呈现所有下拉项

问题描述

解决方案

推荐阅读