Как связать событие кнопки с другим компонентом React?

Question

Я изучаю React и пытаюсь создать простое приложение: вы нажимаете кнопку, и она увеличивает счетчик.Я подготовил два компонента, ClickCounter и ClickButton, но я не уверен, как их соединить.Я читал разные учебные пособия, но они ожидают, что мои компоненты будут родительскими / дочерними - есть ли что-то, чего я полностью упускаю с архитектурной точки зрения?

class ClickCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{this.state.count}</h1>;
  }
}

function ClickButton(props) {
  function handleClick(e) {
    e.preventDefault();
    console.log("clicked");
    // increment the ClickCounter..how?
  }
  return (
    <button id="btn" onClick={handleClick}>Click me</button>
  );
}


function Container() {
  return (
    <div>
      <ClickCounter />
      <ClickButton />
    </div>
  );
}

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

Answer 1

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

Пример

function ClickCounter(props) {
  return <h1>{props.count}</h1>;
}

function ClickButton(props) {
  return (
    <button id="btn" onClick={props.handleClick}>Click me</button>
  );
}


class Container extends React.Component {
  state = { count: 0 };

  onClick = () => {
    this.setState(prevState => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    return (
      <div>
        <ClickCounter count={this.state.count} />
        <ClickButton handleClick={this.onClick} />
      </div>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>