如何通过react应用的UI设置两个视图的变量？

import React, { useState } from 'react';

function App() {
  const [view1, setView1] = useState('View 1');
  const [view2, setView2] = useState('View 2');

  // 其他组件代码...

  return (
    <div>
      {/* UI元素和事件处理程序 */}
    </div>
  );
}

export default App;

function App() {
  const [view1, setView1] = useState('View 1');
  const [view2, setView2] = useState('View 2');

  const handleView1Click = () => {
    setView1('New View 1');
  };

  const handleView2Click = () => {
    setView2('New View 2');
  };

  return (
    <div>
      <button onClick={handleView1Click}>{view1}</button>
      <button onClick={handleView2Click}>{view2}</button>
    </div>
  );
}

function App() {
  const [view1, setView1] = useState('View 1');
  const [view2, setView2] = useState('View 2');

  const handleView1Click = () => {
    setView1('New View 1');
  };

  const handleView2Click = () => {
    setView2('New View 2');
  };

  return (
    <div>
      <button onClick={handleView1Click}>{view1}</button>
      <button onClick={handleView2Click}>{view2}</button>

      <p>{view1}</p>
      <p>{view2}</p>
    </div>
  );
}