反应 | 在组件外调用 function

Question

I want to call the increment function of the CounterText from the CounterButton .

Note: This is not the particular case I'm trying to solve, but it's very similar. I have a stipulation: I can't change the order of the items, they have to stay at one level, they have to be separate.

I have one root component looks like this:

function App() {
  return (
    <div> 
       <CounterText/>
       <CounterButton/>
    </div>
  );
}

CounterText looks like this:

const count = useRef(0);

function CounterText() {
  
  function Increment() {
     count.current++;
  }

  return(
     <h2>{count.current}</h2>
  );
}

CounterButton looks like this:

function CounterButton() {
    return (
       <button>Increment</button>
    );
}

PS.: Sorry for my English.

Answer 1

The usual solution is to lift state up into the parent component, and pass it down to child components as props or context , along with a function they can use to update the state if needed, something like this:

function App() {
    const [counter, setCounter] = useState(0);

    const increment = useCallback(
        () => setCounter(c => c + 1),
        []
    );

    return (
        <div> 
            <CounterText counter={counter} />
            <CounterButton increment={increment} />
        </div>
    );
}

function CounterText({counter}) {
    return(
        <h2>{counter}</h2>
    );
}

function CounterButton({increment}) {
    return (
        <button onClick={increment}>Increment</button>
    );
}

Live Example:

 const {useState, useCallback} = React; function App() { const [counter, setCounter] = useState(0); const increment = useCallback( () => setCounter(c => c + 1), [] ); return ( <div> <CounterText counter={counter} /> <CounterButton increment={increment} /> </div> ); } function CounterText({counter}) { return( <h2>{counter}</h2> ); } function CounterButton({increment}) { return ( <button onClick={increment}>Increment</button> ); } ReactDOM.render(<App/>, document.getElementById("root"));

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

TheuseCallback call there isn't required , but it makes the increment function stable, which prevents unnecessarily re-rendering CounterButton when counter changes.