Question

环境

反应16.0.0
Restraps 5.0.0

情况

我正在使用组件UncontrolledDropdown --> DropdownToggle --> DropdownMenu --> DropdownItem。对于DropdownItem，我需要向其传递一个函数，以便它更改其父亲的状态（这是其自身的prop值）。这是因为我希望DropdownToggle元素显示所选DropdownItem的值。为此，父组件将保留所选DopdownItem的值，并将其作为prop传递给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>
        );
    }

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

Answer 1

更改父级中的状态（通过传递的处理程序）会导致父级重新呈现（通过设计）。您可以通过shouldComponentUpdate避免这种情况。

DropdownMenu会在每次点击时重新显示所有dropdownitem

1 个答案: