Да, поскольку вы заявили, что ваш подход неверен, в React вы хотите разделить использование кода по составу компонентов вместо наследования.
Я собираюсь использовать нечто похожее на ваш пример, чтобы помочь вам понять концепцию, скажем, вы хотите создать базовый компонент с именем IconButton, который будет кнопкой с текстом рядом со значком, и вы хотите использовать повторно этот компонент для создания еще двух компонентов DangerIconButton (это кнопка со значком, который должен представлять опасную ситуацию, например операцию удаления), и вы хотите создать SuccessfulIconButton (кнопку, где вы хотите представить желаемое действие)
Теперь, основываясь на наших требованиях, мы видим, что функциональность всех трех компонентов одинакова, в основном это обработчик кликов, но отличается визуальное представление (значок и стили, примененные к кнопке).
давайте создадим наш базовый компонент
class IconButton extends React.Component{
render(){
return <button onClick={props.onClick} style={props.style}>
<img src={props.icon} />
<span>button text</span>
</button>
}
}
теперь наши два других компонента будут намного проще, и мы будем использовать этот базовый компонент
class SuccessfulIconButton extends React.Component{
render(){
// notice how i'm creating this component by composition of other components
// happyIcon and green are what makes this a successful butoon
return <IconButton onClick={props.onClick} style={{background: 'green'}} icon={happyIcon} />
}
}
class DangerIconButton extends React.Component{
render(){
// notice that i'm getting the onClick handler here through props, because u want the parent components of this component to have their specific handlers
return <IconButton onClick={props.onClick} style={{background: 'red'}} icon={dangerIcon} />
}
}
конечно, здесь вы хотите лучше назвать и вы все еще хотите сделать общий стиль для всех ваши иконки, такие как padding, и другие вещи. но, надеюсь, концепция прошла через