React：以回调为道具连接 HOC

Question

我有几个“愚蠢”的组件。我正在尝试制作一个将它们连接到 Redux 存储的高阶组件，并将回调函数作为道具传递。子组件会调用这个回调函数来响应点击事件。

我正在与范围作斗争。回调函数需要 setState 并且还 dispatch 一个 Redux action。

以下是不起作用的：

//Child Component
class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <button onClick={this.props.callbackFunc}>Click</button>;
  }
}

//callback function
clickCallback(e){
  this.setState({foo: "bar"});
  this.props.dispatch(
    someReduxAction({boo: "baz"})
  );
}

const WithCallbackChunk = (Comp, callback) => {
  return class extends React.Component {
    constructor(props){
      super(props);
      this.callback = callback.bind(this);
    }
    render() { return <Comp callbackFunc={callback} {...this.props} />; }
  }
}

   
//connected comp
const ConnectedChunk = function(comp){
  return connect(
    null,
    {someReduxAction}
  )(WithCallbackChunk(comp));
}

const ConnectedCallbackComp = ConnectedChunk(Child);

export { ConnectedCallbackComp }

我无法在回调中同时获得 setState 和 props.dispatch 的正确范围。

提前致谢！

更新/解释

有几个人询问了WithCallbackChunk 的用途。我正在尝试将表示逻辑与表单处理分开。

我的应用程序允许用户构建自定义表单。有一种显示表单预览的编辑模式，表单的这些“块”中的每一个都是上面简化示例中的Child 组件。当该表单发布时，那些子组件（构成该表单）需要变得可交互并连接到 Redux 存储。

我试图通过重用“哑”演示组件来编辑和实时表单上下文（因为它们是相同的），从而使事情保持干燥。但表单处理仅在实时上下文中需要。 Child 组件在两种上下文中都有所有 Redux 操作似乎很混乱，所以我试图弄清楚如何通过 props 传递该功能。

我的目标是让子组件只定义 UI，然后让两个不同的“包装器”HOC 组件为各自的上下文提供额外的功能。很明显，我没有做到这一点。也许我以错误的方式思考这个问题？我欢迎有关更好的方法的反馈或建议。

总结这一点的另一种方式是，我正在为 React 的单向数据流而苦苦挣扎。 （信息只会“向下”传递给孩子。）我正在尝试将上下文逻辑从 HOC 向下传递。但是 Child 组件是唯一知道何时调用它的组件（因为它定义了 UI）

Answer 1

您将错误的回调传递给包装的组件。传递与内部组件的this 绑定的那个，而不是传递给 HOC 的那个。

const withCallback = (WrappedComponent, callback) => {
  class BaseContainer extends Component {
    constructor(props) {
      super(props);
      this.callback = callback.bind(this);
    }
    
    render() {
      return (
        <WrappedComponent
          callbackFunc={this.callback} // <-- pass the bound callback to this component
          {...this.props}
        />
      );
    }
  }

  return BaseContainer;
};

在使用 redux 编写时，不要忘记将回调传递给 withCallback HOC。

const ConnectedChunk = connect(
  null,
  {someReduxAction}
)(withCallback(comp, callback));