javascript - React.js 是否以不同方式处理 "static"？复合成分

Question

static 关键字不应该引用类本身的全局变量并且与组件的实例无关吗？

那么为什么在复合组件模式中，当我们实例化同一个类的多个组件时，尽管它们依赖于一个静态变量，但它们往往表现得各不相同

所以根据我对“static”关键字的理解，它是该类所有实例的全局变量，该变量的更改应该更改该类中的所有组件

  static On = (props)=> props.on ? props.children : null 
  static Off = (props)=> !props.on ? props.children : null 
  static Button = ({on,toggle})=> <Switch on={on} onClick={toggle}/>
    return React.Children.map(this.props.children, child=>{
      return React.cloneElement(child,{
        on:this.state.on,
        toggle:this.toggle
      })
    })

  <>
    <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Off>The button is off</Toggle.Off>
      <Toggle.Button />
    </Toggle>


    <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Button />
      <Toggle.Off>The button is off</Toggle.Off>
    </Toggle> 
  </>

老实说，当我影响其中一个时，我真的希望这两个组件都能打开和关闭，有人能给我解释一下吗？

Answer 1

子组件本身是静态的，不绑定(bind)到 Toggle 组件的任何单个实例。但是，您传递给静态子组件的 props 是基于 this.state 的， 绑定(bind)到每个实例。

如果您也将 state 设置为静态(或者只是给 Toggle 一个 static on 属性)，则通过单击 Button 更改该属性将导致两个 Toggle 发生变化。

请注意，这与this.state不同，因此this.setState将不起作用，更改Toggle.state.on不会触发重新渲染。您需要在父级中调用 this.setState，以便触发两个 Toggles 的重新渲染。

class Toggle extends Component {
  static state = { on: true }

  toggle = () => {
    Toggle.state.on = !Toggle.state.on

    // reRenderParent should make a `setState` call in the
    // parent in order to re-render both Toggles.
    this.props.reRenderParent();
  }

  render() {
    ...
  }
}

这是一个工作示例:https://codesandbox.io/s/young-snowflake-whiu7