react中元素的显示和隐藏方式的使用（函数组件）

import React, { useState } from 'react';
import PropTypes from 'prop-types';
 
// 自定义组件，用于显示和隐藏内容
const Collapsible = ({ title, children }) => {
  const [isShown, setIsShown] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsShown(!isShown)}>
        {isShown ? '隐藏' : '显示'} {title}
      </button>
      {isShown && <div>{children}</div>}
    </div>
  );
};
 
Collapsible.propTypes = {
  title: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
};
 
export default Collapsible;

这段代码定义了一个名为Collapsible的React函数组件，它使用了Hook useState来管理状态，实现了内容的显示和隐藏。组件接收title和children属性，其中children是要显示或隐藏的内容。点击按钮时，isShown状态变量的值会被反转，从而控制内容的显示与隐藏。这个组件使用了函数组件和Hook的React新特性，是学习React中状态管理的一个很好的例子。