повторное использование компонентов реагирующих состояний

Question

Я новичок в React и хотел получить совет.

Проблема, по сути, заключается в следующем

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

Кнопки главного экрана (компоненты)

<Button value="First"></button>
<Button value="Second"></button>
<Button value="Third"></button>.....

Modal.

<button value="Donald"></button>
<button value="Thomas"></button>
<button value="Evie"></button>.....

Так, например, кнопки главного экрана будут иметь следующую функцию, чтобы они передавались модальному атрибуту кнопок onClick.

selectPerson(e) {
  setState({ selection : e.target.value})
}

Итак, выбрав «Первый», мы выбираем человека, закрываем модальное, связываем выбранного человека с состоянием «Кнопки», а затем повторяем для второго и т. Д.

По сути, эти кнопки для открытия модальных имеют те же основные функции (состояние и реквизит). Т.е. у меня мог бы быть компонент шаблона для его повторного использования, но я бы хотел, чтобы каждый компонент имел независимое состояние и свойства.

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

Есть ли способ избежать переписывания одного и того же кода для каждого (у меня их двадцать). Я только начал (очевидно) и не слишком знаком с некоторыми из более продвинутых концепций. Если у кого-то есть какие-либо предложения или дополнительные вопросы, было бы здорово. Я не предоставил код, поскольку код работает, он просто очень громоздкий

Answer 1

Да, конечно, определите компоненты кнопки и передайте определенные элементы внутри ее реквизита.Затем вы можете установитьState как эти переданные элементы поддержки и т.д. и т.п.Затем у вас есть изменяемый шаблонный компонент Button.

Когда вы визуализируете их, вы просто определяете его реквизиты.

<Button prop = "First" prop2 = "EXAMPLE"..../>
<Button prop = "Second" prop2 = "EXAMPLE2"..../>
<Button prop = "Third" prop2 = "EXAMPLE3"..../>

, тогда внутри компонента Button используйте что-то вроде

this.state { property1 : this.props.prop, property2 : this.props.prop2 ...}

Надеюсь это поможет!Я недавно делал нечто подобное