"當下拉列表更改其在 react.js 中的選定值時如何重新渲染不相關的組件"

Question

我有一個包含帳戶名稱和帳戶 ID 的下拉列表。 下拉列表是我的 NavMenu.js 中名為 AccountsDropdown 的子項

 render () {
return (
  <header>
     <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
      <Container>
        <div><NavbarBrand className="brand-name" tag={Link} to="/">PABST</NavbarBrand><br />
        <NavbarText className="sub-headline" to="/">Budget Allocation & Forecasting</NavbarText></div>
        <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
        <AccountsDropdown></AccountsDropdown>
        <Collapse className="d-sm-inline-flex flex-sm-row-reverse center-align-flex margin-right" isOpen={!this.state.collapsed} navbar>
          <ul className="navbar-nav flex-grow">
            <NavItem>
              <NavLink tag={Link} id={"budgetplanner"} onClick={() => this.handleChange("budgetplanner")} className={"budgetplanner" === this.state.selectedNavItem ? "active" : "inactive"} to="/"><EventNoteIcon ></EventNoteIcon>Budget Planner</NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} id={"budgetresults"} onClick={() => this.handleChange("budgetresults")} className={"budgetresults" === this.state.selectedNavItem ? "active" : "inactive"} to="/budget-results"><PieChartRoundedIcon></PieChartRoundedIcon>Budget Results</NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} id={"docs"} onClick={() => this.handleChange("docs")} className={"docs" === this.state.selectedNavItem ? "active" : "inactive"} to="/fetch-data"><FolderRoundedIcon></FolderRoundedIcon>Docs</NavLink>
            </NavItem>
          </ul>
        </Collapse>

Answer 1

Redux 不是強制實現這一點的。 向 BudgetResults & AccountsDropdown 添加一個共同的祖先。 將狀態向上移動到這個祖先。 然后，您可以使用 prop 回調或 Context API 來實現它。

"