Question

我正在尝试在reactjs中学习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;

我想访问second.js中的First.js变量。给我解决方法。

谢谢。

Answer 1

尝试一下

"line 2"

Answer 2

您显示的上述实现不是HOC，而是简单的Route实现，由于要在First内渲染Second组件，因此您想在内部实现/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;

如何在reactjs中正确定义高阶组件？

2 个答案: