вызов метода конкретного дочернего объекта ref в реакции, когда есть несколько компонентов

Question

У меня есть родительский компонент, который представляет собой набор дочерних компонентов меню фильтра.У каждого дочернего компонента есть группа переключателей, и все кнопки определяют, проверяются ли они через свое состояние.

В родительском компоненте, когда существует хотя бы один фильтр, для которого пользователь сделал выбор, появляется список кнопок выбранных параметров фильтра.

Когда одна из этих кнопокщелкнув, он должен вызвать функцию в этом дочернем компоненте для сброса его радиогрупп.

Я видел здесь и здесь как вызвать функцию в одном дочернем элементеref, когда этот ref известен, но как мне это сделать, когда ссылки генерируются в цикле, и я хочу только вызвать ссылку на конкретный дочерний компонент, который соответствует нажатой кнопке?

Вот соответствующий [псевдокод]:

//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').

Затем родитель получит обратный вызов и соответственно установит состояние своих фильтров. Состояние меняется, фильтры снова отображаются с новыми данными.

Надеюсь, это поможет:)

Answer 2

Вы можете сделать так