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));