React以更干净的方式提升状态

// CounterApp.jsx
import React, { useState } from 'react';
import CounterDisplay from './CounterDisplay';
import CounterControl from './CounterControl';

function CounterApp() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <CounterDisplay count={count} />
      <CounterControl increment={increment} decrement={decrement} />
    </div>
  );
}

export default CounterApp;

// CounterDisplay.jsx
import React from 'react';

function CounterDisplay({ count }) {
  return <div>Count: {count}</div>;
}

export default CounterDisplay;

// CounterControl.jsx
import React from 'react';

function CounterControl({ increment, decrement }) {
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default CounterControl;