react.js 下拉列表更改其选定值时如何重新呈现不相关的组件

Question

我有一个包含帐户名称和帐户 ID 的下拉列表。下拉菜单是一个 child，它位于我的 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>

如您所见，此菜单还重定向到我的其他 JSX 页面。因此，例如，当用户单击“预算结果”时，他们将被重定向到“预算结果”页面。此预算结果页面是顶级 parent。它不是任何其他组件的 child。这是代码：

import React, { Component } from 'react';
import MainGridComponent from './MainGridComponent';
import '../css/main.css';

export class BudgetResults extends Component {
static displayName = BudgetResults.name;

constructor(props) {
super(props);
this.state = {
      accountid: "1"
    };
}

render() {
    return(
        <div className="row">
            <div className="col-md-8 budget-results">
                <span className="grid-header">Recent Budget Output</span>
                <MainGridComponent accountid={this.state.accountid} pagetype="BudgetResults"></MainGridComponent>
            </div>
        </div>
     );
    }
  }

 export default BudgetResults

如您所见，AccountsDropdown 和 BudgetResults 完全无关。我的问题是，当 AccountsDropdown 更改其状态时，是否可能导致 BudgetResults 重新呈现？这是只有 Redux 才有的可能吗？

Answer 1

Redux 不是强制实现的。将共同祖先添加到 BudgetResults & AccountsDropdown。将状态向上移动到这个祖先。然后你可以使用 prop 回调或 Context API 来实现它。

react.js 下拉列表更改其选定值时如何重新呈现不相关的组件

How to rerender unrelated components when a dropdown changes its selected value in react.js

javascript

reactjs

redux