React.js обрабатывает «статический» по-другому? составные компоненты

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. Однако реквизиты , которые вы передаете статическим подкомпонентам, основаны на this.state, который равен для каждого экземпляра.

Если вы также сделаете state статическим (или просто дадите Toggle свойство static on), изменение этого свойства нажатием кнопки приведет к изменению обоих Toggle s.

Обратите внимание, что это отличается от this.state, поэтому this.setState не будет работать, а изменение Toggle.state.on не вызовет повторную визуализацию. Вам нужно позвонить this.setState в родительском режиме, чтобы запустить повторный рендеринг для обоих переключателей.

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
      })
    })

Так что, когда вы переключаете один, другие не переключаются, потому что они разные.