如何使用基于状态的道具组织React动态组件

import React, { useState } from 'react';

// 子组件
function DynamicComponent({ state, onUpdate }) {
  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={onUpdate}>Update State</button>
    </div>
  );
}

// 父组件
function ParentComponent() {
  const [state, setState] = useState('Initial State');

  const handleUpdate = () => {
    setState('Updated State');
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <DynamicComponent state={state} onUpdate={handleUpdate} />
    </div>
  );
}

export default ParentComponent;

import React, { useState, memo } from 'react';

const DynamicComponent = memo(({ state, onUpdate }) => {
  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={onUpdate}>Update State</button>
    </div>
  );
});

function ParentComponent() {
  const [state, setState] = useState('Initial State');

  const handleUpdate = () => {
    setState('Updated State');
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <DynamicComponent state={state} onUpdate={handleUpdate} />
    </div>
  );
}

export default ParentComponent;

function ParentComponent() {
  const [state, setState] = useState('Initial State');

  const handleUpdate = () => {
    setState(prevState => `Updated State: ${prevState}`);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <DynamicComponent state={state} onUpdate={handleUpdate} />
    </div>
  );
}