Creo que este artículo puede arrojar algo de luz sobre su problema: Lifting State Up - React Docs . No recomendaría intentar actualizar el estado del Componente n.º 1 desde el interior del Componente n.º 2. Tome la lógica de incremento de su Componente de incremento y conviértalo en un método en su Componente principal. Luego pase el método como accesorio en el Componente Incremento.

En Temporizador.js

 import React, { Component } from "react"; import Increment from "./Increment"; class Timer extends Component { // The Constructor is necessary for adding the handleIncrement method // State should be initialized here as well. constructor(props) { // super(props) is required on class based component constructors super(props); this.state = { count: 0 }; this.handleIncrement = this.handleIncrement.bind(this); } // This is the method handleIncrement() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div className="top"> <span className="display">{this.state.count}</span> {/* handleIncrement is the name of the prop that will be referenced inside the Increment.js Component. */} {/* this.handleIncrement is the method. */} <Increment handleIncrement={this.handleIncrement} /> </div> ); } } export default Timer;

En Incremento.js

 import React from "react"; // Putting (props) means this component is expecting a prop when // its been imported and used as <Increment propGoesHere={value} /> in Timer.js const Increment = (props) => { return ( <button className="btn btn-primary" onClick={props.handleIncrement}> + </button> ); }; export default Increment;

Aparte, los componentes basados en clases se pueden evitar por completo (porque quién quiere lidiar con la palabra clave "esto", los constructores y vincular todos los métodos) usando el gancho useState.

Se vería algo como: En Timer.js

 import React, { useState } from "react"; const Timer = () => { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(count + 1); }; return ( <div className="top"> <span className="display">{count}</span> <button className="btn btn-primary" onClick={handleIncrement}> + </button> </div> ); }; export default Timer;

• Ya no es necesario que una clase contenga el estado, ¡ahora cualquier componente puede albergar el estado!
• ¡No más constructores, no hay necesidad de vincular métodos, no más palabra clave "esta"!
• No es necesario el componente secundario de incremento completo

Ante todo

 <button className="btn btn-primary" onClick={<Increment />} > + </button>

Esta pieza específica de código es imposible de hacer funcionar. No puede pasar un componente como una función a un onClick. Como no conozco la aplicación práctica de su pregunta, no tengo idea de qué es exactamente lo que está tratando de lograr, así que aquí hay solo una opción de cómo hacer que estos componentes específicos funcionen.

 import React from "react"; import Increment from "../components/Increment"; class Timer extends React.Component { //State state = { count: 0, mountCounter: false, }; increaseCount = () => { this.setState({ count: this.state.count + 1, mountCounter: false }); }; render() { return ( <div className="top"> <span className="display">{this.state.count}</span> <button className="btn btn-primary" onClick={() => this.setState({ mountCounter: true })} > + {this.state.mountCounter && ( <Increment increaseCount={() => this.increaseCount()} /> )} </button> </div> ); } } export default Timer; import React, { Component } from "react"; class Increment extends Component { constructor(props) { super(props); } componentDidMount() { this.props.increaseCount(); } render() { return null; } } export default Increment;