反应中重新渲染组件后的最佳实践重新初始化

Question

我目前正在使用以下解决方法在重新渲染组件后重新初始化手风琴等Materialize和Bootstrap等JS代码。现在我遇到的问题是，每次为每个手风琴项重新渲染组件，我不想再为每个项目运行init代码。

在props / state更改后等待上一个渲染例程完成的最佳做法是什么？

class List extends Component {

constructor(props) {

    super(props);

    this.state = {
        collapsibleIsMounted: false
    };
}

componentDidMount() {

    this.initializeCollapsible();
}

componentDidUpdate() {

    this.initializeCollapsible();
}

initializeCollapsible() {

    const collapsibleExists = $('.collapsible').length > 0;
    const isMounted = this.state.collapsibleIsMounted;

    if( collapsibleExists && !isMounted ) {

        $('.collapsible').collapsible({
            accordion: false
        });
        this.setState({
            collapsibleIsMounted: true
        });
    }
}

componentWillMount() {

    this.props.fetchItems();
}

这里的渲染例程：

render() {

    const {items} = this.props

    return(
        <ul className="collapsible popout" data-collapsible="expandable">
            {this.renderItems(items)}
        </ul>
    );
}

renderItems(items) {
    return items.map((item) => {

        return (
            <li key={item.id}>
                <div className="collapsible-header">{item.title}</div>
                <div className="collapsible-body"><p>Test</p></div>
            </li>
        );
    });
}

解决问题的一个可能的解决方案如下，但我希望有一个更好的解决方案（可能使用redux），因为它是一个“巨大”的小功能代码，它在某种程度上感觉不对：< / p>

initializeCollapsible() {

    const collapsibleExists = $('.project-list .collapsible').length > 0;
    const isMounted = this.state.collapsibleIsMounted;
    const amountItems = $('.project-list .collapsible li').length;

    if( collapsibleExists && !isMounted && amountItems > 0 ) {

        $('.ppp .collapsible').collapsible({
            accordion: false
        });
        this.setState({
            collapsibleIsMounted: true
        });
    }
}