Мы можем создать статический член в React?

Один из подходов - присвоить классу переменную, чтобы каждый экземпляр класса включал эту переменную. Это значение не будет полностью статичным, поскольку его можно переназначить через this.variableName = 'newValue'.

class MyComponent extends React.Component {
    variableName = 'value'

    render() {
      return <div>{this.variableName}</div>
    }
}

В качестве альтернативы вы можете сделать его методом, возвращающим константу, в этом случае value больше не может быть перезаписан.

const value = 'value'
class MyComponent extends React.Component {
    getValue() {
      return value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

Кроме того, предположим, что статическое значение может измениться, и вы хотите, чтобы все компоненты могли читать обновленное значение (без сокращения), тогда вы можете обернуть его в объект.

В качестве альтернативы вы можете сделать его методом, возвращающим константу, в этом случае value больше не может быть перезаписан.

const staticProperty = {
  value: 'value'
}
class MyComponent extends React.Component {
    getValue() {
      return staticProperty.value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

В приведенном выше примере, поскольку staticValue является изменяемым, вы можете запустить staticValue.value = 'some new value', и он обновит значение. В следующий раз, когда какой-либо компонент вызовет this.getvalue(), он получит my new value. Проблема с этим подходом заключается в том, что изменение staticValue.value не приведет к запуску обновления компонентов, поскольку не произошло никаких изменений свойств или состояний.

Если вы хотите, чтобы компоненты получали обновления об изменениях свойств, на этом этапе вы повторно внедряете Redux, и я бы рекомендовал вам использовать Redux. Вам нужно будет подписаться на каждый компонент, чтобы отслеживать изменения в определенном разделе состояния, и вы можете увидеть, как этого добиться, посмотрев исходный код Redux: https://github.com/reduxjs/redux/blob/master/src/createStore.js

пройдите по ссылке https://codesandbox.io/s/wnxp7rzvjw, я получил решение

я использовал один родительский класс, чтобы создать общий экземпляр для обоих классов

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      countInstance: new Cart(this)
    };
  }

  onPlus = () => {
    this.state.countInstance.state.count += 1;
    this.state.countInstance.render();
  };

  render() {
    return (
      <div>
        <Increment countInstance = {this.state.countInstance} />
        <Decrement countInstance = {this.state.countInstance} />
      </div>
    );
  }
}

class Increment extends Component {
  constructor(props) {
    super(props);
  }

  onPlus = () => {
    this.props.countInstance.state.count += 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>Count in first componet: {this.props.countInstance.state.count}</h1>
        <button onClick = {this.onPlus}>+</button>
      </div>
    );
  }
}

class Decrement extends Component {
  constructor(props) {
    super(props);
  }

  onMinus = () => {
    this.props.countInstance.state.count -= 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>
          Count in second componet : {this.props.countInstance.state.count}
        </h1>
        <button onClick = {this.onMinus}>-</button>
      </div>
    );
  }
}

class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  updateParent = () => {
    this.props.setState({
      update: !this.state.update
    });
  };
  render() {
    {
      this.updateParent();
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Javascript (на котором основана реакция) не является действительно ООП, как Java, это язык на основе прототипного типа, поэтому нет прямого эквивалента для классовых и статических переменных.

В ответ на эти глобальные вещи мы будем использовать Redux для данных или React.Context api для глобального состояния приложения.

Однако с ES6 вы можете написать синтаксис класса, подобный этому

class Cart {
  static count = 0;

  add = () => {
    Cart.count++;
  };
  remove = () => {
    Cart.count--;
  };

  print = () => {
    console.info(Cart.count);
  };
}

которые работают почти так же, как переменные класса Java. вы можете попробовать этот пример, обратите внимание на рендеринг, значение остается прежним. https://codesandbox.io/s/wo62022jo5