如果全局变量值发生变化，如何强制渲染？

Question

#File 1:
let ticketEnable = false;

export default class SupportTicketMain extends Component {
  constructor () {
    super();
  }
  render () {
    let expandIcon = <DownIcon/>;
    if (this.state.ticketDetailExpanded) {
      expandIcon = <UpIcon/>;
    }
    return (
      <Section className="ticketMain" primary={true}>
        <TicketHeader expanded={ticketEnable}/>
      </Section>
    );
  }
};

export function setTicketEnablement (value) {
    ticketEnable = value;
}


#file 2:

import { setTicketEnablement } from file1;

export default class SupportTicketTabs extends Component {
  constructor () {
    super();
    this.state = {
      ticketDetailExpanded: false
    };

    this._expandClick = this._expandClick.bind(this);
  }

  _expandClick() {
    this.setState({ticketDetailExpanded: !this.state.ticketDetailExpanded});
    setTicketEnablement(this.state.ticketDetailExpanded);
  }

  render () {
    let expandIcon = <DownIcon/>;
    if (this.state.ticketDetailExpanded) {
        expandIcon = <UpIcon/>;
    }

    return (
          <Button className="expander" type="icon" onClick={this._expandClick}>
             {expandIcon}
          </Button>
    );
  }
};

在这里单击 #file2 的 supportTicketTabs 类中的按钮将更新 #File1 中的全局变量，但如果全局变量值发生更改，则 SupportTicketMain 渲染不会更新！请指导我。

Answer 1

ticketEnable 应该是传递给SupportTicketMain 的道具。包装SupportTicketTabs 和SupportTicketMain 的组件应该将回调作为修改ticketEnable (toggleTicketEnable) 的值和ticketEnable 的值的道具传递

class Main extends Component {
  constructor (props) {
    super(props);
    this.onToggleTicketEnable = this.onToggleTicketEnable.bind(this);
    this.state = {
      ticketEnabled: false;
    };
  }
  onToggleTicketEnable() {
    this.setState({ ticketEnabled: !this.state.ticketEnabled });
  }
  render () {
    return (
      <App centered={false}>
        <SupportTicketMain ticketEnable={this.ticketEnabled} />
        <SupportTicketTabs onToggleTicketEnable={this.onToggleTicketEnable}/>
      </App>
    );
  }
}