使用ReactJS隐藏/显示内容

import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      {isVisible && <p>This content can be shown or hidden.</p>}
    </div>
  );
}

export default App;

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <button onClick={() => document.getElementById('hiddenContent').style.display = 'none'}>
        Hide
      </button>
      <button onClick={() => document.getElementById('hiddenContent').style.display = 'block'}>
        Show
      </button>
      <div id="hiddenContent" className="hidden">
        This content can be shown or hidden using CSS.
      </div>
    </div>
  );
}

export default App;

.hidden {
  display: none;
}

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    console.log('Visibility changed:', isVisible);
  }, [isVisible]);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      <div className={isVisible ? 'visible' : 'hidden'}>
        This content can be shown or hidden using CSS.
      </div>
    </div>
  );
}

export default App;

.hidden {
  display: none;
}

.visible {
  display: block;
}