当有多个组件时，在react中调用特定子ref的方法

Question

我有一个父组件，它是一组子过滤器菜单组件。每个子组件都有一组单选按钮，所有按钮均决定是否通过其状态进行检查。

在父组件中，当至少有一个用户为其选择的过滤器时，将显示所选过滤器选项的按钮列表。

单击这些按钮之一时，它应在该子组件中调用一个函数以重置其单选组。

我在这里和这里已经看到了如何在知道一个引用的情况下在单个子引用中调用函数，但是当引用在循环中生成时，我将如何完成此操作，而我只想调用特定子引用的引用与单击的按钮匹配的组件？

这是相关的[伪代码]：

//FILTERS.JS

{filters.map((filter, index) => {

    return (

        <FilterContainer

            key={`filter--${filter.id}`}

            //NEED UNIQUE REF HERE THAT I CAN CALL

        />

    )

})}

handleClearSelectedFilter = ()=>{

    this.[matchingFilterContainerRef].current.resetRadioGroup();

}

matchingFilterContainerRef我将与为相应filterContainer子组件单击的按钮匹配的动态引用放在哪里。

Answer 1

希望我能正确理解您的问题，我想提出一种不同的方法。在父组件中，您拥有一个保存过滤器的状态。每个过滤器都有自己的一组值。然后，父级映射到过滤器，并将所需的每个FilterContainer道具（如其值）传递给发生变化的回调函数。根据这些值，FilterContainer知道如何渲染其单选按钮。数据是从父级流向子级的。单击单选按钮后，您将调用父级提供的带有过滤器字段和当前值的回调，例如，单击了性别单选按钮，您将调用this.props.onValueChange('gender', 'female')。然后，父级将接收回调并相应地设置其过滤器状态。状态发生变化，过滤器将再次使用新数据进行渲染。