Компоненты высшего порядка (HOC)

Question

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

import React, {Component} from 'react';

class Mine extends Component {
constructor(props){
    super(props);
    this.state = {
        coins: 0,
        answer: ""
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (event) => {
    event.preventDefault();
    this.setState({coins: this.state.coins + 1})
    console.log("Your Answer: " + this.state.answer + " and coins: " + this.state.coins);
}
handleChange = (event) => {
    this.setState({[event.target.name]: event.target.value});
    console.log(this.state.answer);
}
render() {
    const {answer} = this.state;
    const isEnabled = answer.length > 0;
    return (
        <div>
            <h1>Mine Shinto Coins</h1>
            <p>Here you can Mine shinto Coins by being the first to solve the algorithom.</p>
            <p>What is the 7th Fibonacci sequence Number?</p>
            <form onSubmit={this.handleSubmit}>
                <input type="text" name = "answer" onChange = {this.handleChange}/>
                <input type="submit" value="Mine" disabled = {!isEnabled}/>
            </form>
        </div>
    )
}
} 
export default Mine

Я буду работать над письмом с ответами. Другой компонент - то же самое, просто уменьшите монеты.

Answer 1

function withCoinDeal(Component, howChange) {  
  return class extends React.Component {
    state = {
      coins: 0
    }
    handleChange = this.handleChange.bind(this)
    componentDidMount() {
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }
    handleChange() {
      this.setState({
        coins: howChange(DataSource, this.props)
      });
    }
    render() {
      return <Component coins={this.state.coins} {...this.props} />;
    }
  };
}

Приведенный выше пример показывает, как HOC подходит для этой ситуации, но не для вашего случая.