如何在React中单击“下一步”按钮显示新组件

import React, { useState } from 'react';

const StepButton = () => {
  const [showNewComponent, setShowNewComponent] = useState(false);

  const handleClick = () => {
    setShowNewComponent(true);
  };

  return (
    <div>
      <button onClick={handleClick}>下一步</button>
      {showNewComponent && <NewComponent />}
    </div>
  );
};

export default StepButton;

import React from 'react';

const NewComponent = () => {
  return (
    <div>
      <h2>这是新的组件</h2>
      <p>这里是新组件的内容。</p>
    </div>
  );
};

export default NewComponent;

import React from 'react';
import StepButton from './StepButton';

const App = () => {
  return (
    <div>
      <h1>React应用</h1>
      <StepButton />
    </div>
  );
};

export default App;