Question

我正在构建一个React应用，并希望确定实现以下行为的最干净的方法。

我有一个List组件，可渲染N个Details组件。每个Details组件都有一个Connect按钮组件，它将触发某些行为。有3种不同的行为：

立即进行API调用，无需更改状态
打开一个模式并根据输入模式中的值进行API调用，这涉及更改应用程序State以呈现模式，然后在确认modal时进行API调用
打开一个弹出窗口，并根据该弹出窗口中返回的值进行API调用。

要实现此目的，我可以将3个单独的回调传递给Connect按钮组件，然后根据Detail组件的值进行切换，以便它知道要传递哪个回调。但是，这意味着Detail组件具有某种“接通类型”的行为。例如，

if (this.props.name === `immediate-connection`) { 
    callbackToPass = this.props.callApi;
} else if (this.props.name === `trigger-modal`) {
    callbackToPass = this.props.changeStateToRenderModal;
}... // etc.

我还可以构建3个单独的组件来封装行为并将它们从Details呈现，但这不能避免打开类型的行为。

表达此问题的另一种方法是，当Connect按钮的实现不同时，如何获得相同的行为？我是否将此行为封装在由Connect按钮呈现的子组件中，还是将其提升到更改State时？

我应该在React应用程序的哪里放置副作用？

0 个答案: