在 React 中，我们可以通过在 onClick 函数中添加和删除组件来实现动态的页面交互。下面是一个示例代码，它演示了如何在单击按钮时添加和删除组件。

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    setShowComponent(!showComponent);
  };

  return (
    

      单击
      {showComponent && }
    
  );
}

function Component() {
  return 
Hello, World!
;
}

export default App;

在上面的代码中，我们使用了 useState hook 来追踪组件的状态。我们在 App 组件中声明了一个名为 showComponent 的状态变量，并将其初始值设置为 false。在 handleClick 函数中，我们使用 setShowComponent 函数来切换 showComponent 变量的值。如果 showComponent 的值为 true，则渲染 Component 组件，否则不渲染。

这里的关键是 {showComponent && } 表达式。它是一个逻辑与操作符，将检查 showComponent 的值是否为 true。如果 showComponent 为 true，那么表达式的值就是 ，即我们将渲染 Component 组件。如果 showComponent 为 false，那么表达式的值就为 false，因此我们不会渲染组件。

现在，当我们单击按钮时，组件将会被添加或删除，实现了动态交互。