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

子组件本身是静态的，并且未绑定到Toggle组件的任何单个实例。但是，传递给静态子组件的 props 基于this.state，而绑定到每个实例。

如果您也将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

Answer 2

正在发生的事情：

On，Off和Button是碰巧附加到类Toggle上的树组件。在这种情况下，将关系视为名称空间。唯一允许您这样做的想法是以这种方式使用三个组件：Toggle.Component。如果仅在它们自己的文件中声明这三个组件，然后导入它们并在没有Toggle.名称空间的情况下使用它们，那将是完全相同的事情。

每次渲染它们时，React都会克隆组件并渲染一个新组件。这段代码就是这样做的：

return React.Children.map(this.props.children, child=>{
      return React.cloneElement(child,{
        on:this.state.on,
        toggle:this.toggle
      })
    })

因此，当您切换一个时，其他人则不会切换，因为它们是不同的。

React.js是否以不同方式处理“静态”？复合成分

2 个答案: