Question

文档的文档， HOC不会修改输入组件，也不会使用继承来复制其行为。而是，HOC通过将原始组件包装在容器组件中来构成它。

在反应中，如果道具更改组件使用newProps重新呈现。

由于在HOC中，我们将道具传递给两个包装组件test1和test2，因此它们都应在每次道具更改时重新呈现。但是，这没有发生。实际上，先渲染test1和test2，然后通过状态提升和重新渲染test2来更改道具。但是test1保持不变。检查附件图像。

我很想知道react-redux连接和react-router-dom与Router如何在存储和重新渲染组件的每个道具更改上实际工作。

Real Problem on Github

class Test extends React.Component {
  render() {
    return (
      <div>
        <Test1 />
        <Test2 />
      </div>
    )
  }
}

具有HOC的组件

class Test1 extends React.Component {
  render() {
    return(
      <div>
          {
              this.props.test1
          }
          {
              this.props.test2
          }
      </div>
     )
  }
}
export default withHOC(Test1);

具有HOC的另一个组件

class Test2 extends React.Component {
  render() {
    return(
      <div>
        {
            this.props.test1
        }
        {
            this.props.test2
        }
        <button type='button' onClick={()=>this.props.update('test')}>Update </button>
      </div>
    )
  }
}
export default withHOC(Test2);

高阶组件

function withHOC(WrappedComponent) {
  class Test extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          test1: 'test1',
          test2: 'test2'
      }
    }
    update = (u) => {
      this.setState({
          test2: u 
      })
    }
    render() {
      const test1 = this.state.test1;
      const test2 = this.state.test2;
      return (<WrappedComponent test1={test1} test2={test2} update={this.update}/>);
    }
  }
  return Test;
}
export default withHOC;

Log of Life Cycle Methods

Answer 1

首先，您没有在此处实际提出问题-应该重写帖子的标题才能真正提出问题。

我是否正确地说您正在尝试使用HOC在两个组件之间共享状态？然后由于<Test2 />上的<Test1 />已更改，期望props.test2中的更新导致<Test2 />中的更新吗？

如果是这样，这是对HOC的错误思考方式。将HOC视为具有特定属性或行为的装饰组件。您在问题中详细说明的withHOC的使用并不表示“让包装在withHOC中的任何组件都可以访问此HOC中定义的单个状态”，而是说“包装在{{1}中的任何组件}应该具有由此HOC中提供的功能定义的状态。

因此包装这两个组件，然后在withHOC中更改状态，只会更改该特定组件中的状态。

如果您希望<Test2 />中的更新导致<Test2 />中的更新，则必须使用父组件的状态（即<Test1 />）来完成。

高阶成分

1 个答案: