来自无状态功能组件的动态呈现按钮

import React, { useState } from 'react';

const DynamicButton = ({ shouldShow }) => {
  return (
    <div>
      {shouldShow && <button>Click Me</button>}
    </div>
  );
};

const App = () => {
  const [showButton, setShowButton] = useState(false);

  const toggleButton = () => {
    setShowButton(!showButton);
  };

  return (
    <div>
      <button onClick={toggleButton}>Toggle Button</button>
      <DynamicButton shouldShow={showButton} />
    </div>
  );
};

export default App;

// 确保父组件正确传递 shouldShow prop
<DynamicButton shouldShow={showButton} />

// 检查 DynamicButton 组件内部的逻辑
const DynamicButton = ({ shouldShow }) => {
  return (
    <div>
      {shouldShow && <button>Click Me</button>}
    </div>
  );
};