Как правильно определить Компонент высшего порядка в реаги?

Question

Я пытаюсь выучить HOC в реагировании и пытаюсь понять этот базовый пример.

У меня есть 3 файла с именами First.js, Second.js и App.js.Теперь, как мне нужно определить эти файлы, чтобы вычисления, выполненные в первом файле, были доступны для второго файла.

App.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/' component={First}/>
          <Route exact path='/Second' component={Second}/>
        </Switch>
      </Router>
    );
  }
}

export default App;

First.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
  constructor(props){
    super(props);
    this.state={
      number : 1,
    };
  }
  increment = event => {
    this.setState({
      number : this.state.number + 1
    });
  }
  decrement = event => {
    this.setState({
      number : this.state.number - 1
    });
  }
  render(){
    return(
      <div>
        {this.state.number}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <Second number={this.state.number}/>
        <Link to='/Second'>Second</Link>
      </div>
    );
  }
}
export default First;

Second.js

import React, {Component} from 'react';
class Second extends Component{
  render(){
    return(
      <div>
        {this.props.number}
      </div>
    );
  }
}
export default Second;

Я хочу получить доступ к переменной First.js в second.js.Дайте мне решение.

Заранее спасибо.

Answer 1

Показанная выше реализация не является HOC, а представляет собой простую реализацию Route, так как вы рендерите второй компонент внутри First, вы захотите отобразить маршрут /second внутри первого

import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import First from './First';
import Second from './Second';
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/' component={First}/>
        </Switch>
      </Router>
    );
  }
}

export default App;

First.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Second from './Second';
class First extends Component{
  constructor(props){
    super(props);
    this.state={
      number : 1,
    };
  }
  increment = event => {
    this.setState({
      number : this.state.number + 1
    });
  }
  decrement = event => {
    this.setState({
      number : this.state.number - 1
    });
  }
  render(){
    return(
      <div>
        {this.state.number}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <Route path="/Second" render={(props)=> <Second number={this.state.number} {...props}/>} />
        <Link to='/Second'>Second</Link>
      </div>
    );
  }
}
export default First;

Answer 2

Попробуйте это

 <Route path="/Second" render={()=> (
      <div>
         100
      </div>
  )}/>