Reactjs &引用；对",；使用React组织/管理多个模态的方法

我正在自学React，并一直在构建一个简单的预算系统。我使用React Bootstrap进行设计，并构建了一些不同的模式来处理我应用程序中的某些功能

这个应用程序运行得很好，但是作为一个开发人员，我觉得在我的代码的设计方面，事情可以做得更紧一些

其中一个可以设计得更好的地方是我如何处理多模态。正如您所见，我目前有4个模态，所有这些模态都被传递到各种道具中（这些道具也被传递到BudgetContainer中）。由于我需要能够控制从应用程序中的不同位置打开哪个模式，因此一些功能（如“SetOpenModel”）是必需的

然而，这种设计导致我不得不在我的应用程序中来回传递大量的道具，以便将所有数据/功能呈现在我需要的地方。经过一些研究，我发现这就是所谓的“支柱钻井”

我已经研究了一些其他方法，比如某种全局状态管理方法（比如Redux），但这些方法看起来都是非常苛刻的解决方案

我还考虑过将模态的位置移动到触发它们显示的同一组件上，但是我最终发现随机模态分散在整个应用程序中，而不是在一个区域中

这里有我忽略的设计模式吗？我只是个新手？我觉得modals在web开发中是一个非常常见的特性，必须已经有了解决方案

import React, { useState } from 'react'
import { Row, Col } from 'react-bootstrap-v5'
import { useAsync } from 'react-async'

import budgetApi from '@/api/budgetApi.js'
import { transactionDefault } from '@/objectDefaults/transaction.js'
import BudgetContainer from './components/BudgetContainer.js'
import Cashflow from './components/Cashflow.js'
import UnbudgetedTransactions from './components/UnbudgetedTransactions.js'

import BudgetModal from '@/common/modals/BudgetModal'
import DeleteBudgetModal from '@/common/modals/DeleteBudgetModal'
import TransactionDetailModal from '@/common/modals/TransactionDetailModal'
import TransactionSplitModal from '@/common/modals/TransactionSplitModal'

function BudgetContent() {
    const [activeBudget, setActiveBudget] = useState({})
    const [activeTransaction, setActiveTransaction] = useState(transactionDefault)
    const [activeDate, setActiveDate] = useState(new Date())
    const [openModal, setOpenModal] = useState('')

    // Retrieve the budgeting data
    const { data, error, isPending, run } = useAsync({ 
        promiseFn: budgetApi.getPromise,
        deferFn: budgetApi.getDefer,
        watch: activeDate,
        onResolve: (resolvedData) => {
            // Update the activeBudget's data
            let freshActiveBudget = resolvedData.data.budgeted_transactions.filter(
                freshBudget => freshBudget.id == activeBudget.id
            )
            setActiveBudget(freshActiveBudget[0] ?? {})
        },
        // PHP's Carbon library can easily parse ISO dates
        period: activeDate.toISOString()
    })

    return (
        <div>
            <Row>
                <Col md={7}>
                    <BudgetContainer
                        budgets={data && data.data.budgeted_transactions}
                        activeDate={activeDate}
                        setActiveDate={setActiveDate}
                        isPending={isPending}
                        activeBudget={activeBudget}
                        setActiveBudget={setActiveBudget}
                        setActiveTransaction={setActiveTransaction}
                        setOpenModal={setOpenModal}
                    />
                </Col>
                <Col md={5}>
                    <Row>
                        <Col>
                            <Cashflow />
                        </Col>
                    </Row>
                    <Row className="pt-2">
                        <Col>
                            <UnbudgetedTransactions
                                transactions={data && data.data.unbudgeted_transactions}
                                setOpenModal={setOpenModal}
                                setActiveTransaction={setActiveTransaction} 
                            />
                        </Col>
                    </Row>
                </Col>
            </Row>

            {<TransactionDetailModal
                show={openModal == 'transaction_detail'}
                setOpenModal={setOpenModal}
                activeTransaction={activeTransaction}
                refreshBudgets={run}
                budgets={data && data.data.budgeted_transactions}
            />
            <TransactionSplitModal
                show={openModal == 'transaction_split'}
                setOpenModal={setOpenModal}
                activeTransaction={activeTransaction} 
            />
            <BudgetModal
                show={openModal == 'create_budget'}
                setOpenModal={setOpenModal}
                refreshBudgets={run}
                activeBudget={activeBudget}
            />
            <DeleteBudgetModal
                show={openModal == 'delete_budget'}
                setOpenModal={setOpenModal}
                refreshBudgets={run}
                activeBudget={activeBudget}
                setActiveBudget={setActiveBudget}
            />}
        </div>
    )
}

export default BudgetContent

import React，{useState}来自“React”
从'react-bootstrap-v5'导入{Row，Col}
从“react async”导入{useAsync}
从“@/api/budgetApi.js”导入budgetApi
从'@/objectDefaults/transaction.js'导入{transactionDefault}
从“./components/BudgetContainer.js”导入BudgetContainer
从“./components/Cashflow.js”导入现金流
从“./components/UnbudgetedTransactions.js”导入UnbudgetedTransactions
从“@/common/modals/BudgetModal”导入BudgetModal
从“@/common/modals/DeleteBudgetModel”导入DeleteBudgetModel
从“@/common/modals/TransactionDetailModal”导入TransactionDetailModal
从“@/common/modals/TransactionSplitModel”导入TransactionSplitModel
功能预算内容（）{
const[activeBudget，setActiveBudget]=useState（{}）
常量[activeTransaction，setActiveTransaction]=useState（transactionDefault）
const[activeDate，setActiveDate]=useState（新日期（））
const[openModal，setOpenModal]=useState（“”）
//检索预算数据
const{data，error，isPending，run}=useAsync（{
承诺fn:budgetApi.getPromise，
deferFn:budgetApi.getDefer，
手表：activeDate，
onResolve：（resolvedData）=>{
//更新activeBudget的数据
让freshActiveBudget=resolvedData.data.budgeted_transactions.filter(
freshBudget=>freshBudget.id==activeBudget.id
)
setActiveBudget（freshActiveBudget[0]？？{}）
},
//PHP的Carbon库可以轻松解析ISO日期
期间：activeDate.toISOString（）
})
返回(
{
}
)
}
导出默认预算内容

最后，我选择使用React的上下文API在元素之间共享modals所需的信息，并避免钻取