React：以回调为道具连接 HOC

Question

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

我正在为 scope 苦苦挣扎。 回调 function 需要setState并调度 Redux 操作。

这是不起作用的：

//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的 scope 正确。

提前致谢！

更新/解释

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

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

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

我的目标是让子组件只定义 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));