如何重构处理太多条件/用例的react组件？
我想应用坚实的原则与反应组件，这是处理太多的‘用例’。举个例子，假设我有一个组件，它的主要职责是呈现如下表：
return (
<Table dataSource="" name={tableName} />
)这是该表的一个非常简单的表示。但复杂性的主要问题是支撑dataSource。在这个<Table>组件中，我实际上有很多逻辑/if-否则条件，这些条件可以满足组件中散落的dataSource标志，因为dataSource可以接受许多不同的形状/对象结构。有些是非常相似的，它们可以被抽象，而有些则是非常具体的(甚至可能仅仅是一个键的不同)。
例如：
const tableName = `${
dataSource === 'dataSourceA'
? dataSourceName
: dataSourceName.name
}`;这只是一个例子。想象一下，某些dataSource的name属性嵌套在3层深度。然后，其他dataSource甚至会有不同的键名(尽管我需要呈现的结果数据实际上是相同的)。不仅如此，根据dataSource，我可能需要调用不同的端点来执行某些功能(同样，该函数的目的是相同的，只是端点可能有所不同)。因此，在同一个组件中，我将有一个函数，类似于：
const exportTable = () => {
if(dataSource === 'dataSourceA') {
// use endpoint A
} else if (dataSource=== 'dataSourceB') {
// use endpoint B
} else {
// use endpoint C
}
}重构这类组件并使其更易于维护的最佳方法是什么？稍后，我们可以有10种类型的dataSources，我不能在组件中执行if- their条件来满足它们的差异。
Stack Overflow用户
发布于 2020-08-01 12:50:28
我喜欢巴索马卡的回答。它很整洁，能很好地抽象事物。
作为一种替代，我已经完成了您在过去在useEffect函数中描述的内容。
注意:也许useMemo也有一个例子，但我将重点讨论useEffect。
import { parseTableData, TableData } from '../util/for/table/data';
interface TableProps {
data: TableData; // Typing this would be super useful
name: string;
}
const Table: React.FC<TableProps> = ({ name, data }) => {
const [tableData, setTableData] = useState<TableData>(); // undefined on init
useEffect(
() => parseTableData(setTableData, data),
[data, setTableData]
);
if (!tableData) {
return <p>Parsing... please wait.</P>
}
// Here, you can use `tableData` knowing that it has been formatted properly
return ...
}然后，您可以将解析器逻辑抽象为一个单独的文件：
interface TableData {
...
}
export const parseTableData = (
setTableData: React.Dispatch<React.SetStateAction<TableData>>,
data?: TableData,
) => {
// Do whatever parsing / massaging you want to with the data here,
// and build the required response for the state variable.
const response: TableData = {
...
}
setTableData(response);
}https://stackoverflow.com/questions/62996954
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号