高阶组件 - React.JS

Question

正在尝试将初始值 10 传递给高阶组件。

import HOC from './HighOrderComponent'

class ClickHandler extends Component{
  state= {val : 10}

  increment = () => {
    this.props.increment(this.state.val)
  }

  render(){
    return  <button onMouseOver={this.increment}>Mouse Over {this.props.value}</button>
  }
}
export default HOC(ClickHandler)

这里不知道如何使用value来更新

的状态

const HOC = (OriginalComponent) => {

  class HigherOrderComponent extends Component{

    state = { count : 0 }

    increment = (value) => {
      this.setState(prev => ( {count : prev.count + 1 }))
    }

    render(){
      return <OriginalComponent  value={this.state.count} increment={this.increment}/>
    }}

  return HigherOrderComponent
}
export default HOC

预期结果：加载时，Mover 超过 10，一旦悬停，它将增加到 11、12、13.....

谢谢。

Answer 1

您的组件的问题是 HOC 组件的状态覆盖了您在 ClickHandler.

中定义的 10 状态

如果您将 state = { count : 0 } 更改为 state = { count : 10 }，您将获得预期的初始值 10。

但是看到代码，在两个组件中维护状态值的目的是什么？ ClickHandler 的状态值甚至没有被 HOC 使用。

我猜你想在 HOC 内维护状态，只是想为其传递一个初始值。

建议进行以下更改：

class ClickHandler extends Component{
  // no need to maintain state again in `ClickHandler`
  // simply use the increment props for onMouseOver
  render(){
    return  <button onMouseOver={this.props.increment}>Mouse Over {this.props.value}</button>
  }
}

// add extra param for HOC to pass in initialValue of 10
export default HOC(ClickHandler, 10);


const HOC = (OriginalComponent, initialValue) => {

  class HigherOrderComponent extends Component{

    state = { count : initialValue }

    // no need to get the state value from `ClickHandler`
    increment = () => {
      this.setState(prev => ( {count : prev.count + 1 }))
    }

    render(){
      return <OriginalComponent  value={this.state.count} increment={this.increment}/>
    }}

  return HigherOrderComponent
}

高阶组件 - React.JS

Higher Order Components - React.JS

reactjs

higher-order-components