React组件分享：图片、表格和预览功能

2023-11-17 10:55:18

利用React组件提升应用程序开发

在现代应用程序开发中，高效且可靠的组件库至关重要。React作为最流行的JavaScript库之一，以其丰富的组件生态系统而闻名。本文将深入探讨三种实用的React组件，它们可以极大地简化和增强应用程序开发。

图像组件：告别加载错误

图像在用户界面中扮演着至关重要的角色。然而，管理图像的加载和错误状态通常很繁琐。React的图像组件应运而生，它可以自动处理图像的加载和错误状态，并显示相应的提示。

以下代码示例展示了React图像组件的实现：

const Image = (props) => {
  // 跟踪加载和错误状态
  const [isLoading, setIsLoading] = React.useState(true);
  const [hasError, setHasError] = React.useState(false);

  // 使用useEffect在组件挂载时加载图像
  React.useEffect(() => {
    const img = new Image();
    img.onload = () => setIsLoading(false);
    img.onerror = () => setHasError(true);
    img.src = props.src;
  }, [props.src]);

  if (isLoading) return <div>正在加载...</div>;
  if (hasError) return <div>加载图像出错</div>;

  return <img src={props.src} alt={props.alt} />;
};

表格组件：驾驭大量数据

表格组件是显示大量数据和允许用户对其进行排序、过滤和操作的必备工具。React的表格组件提供了一个强大且灵活的框架，可以创建可定制的高级表格。

以下代码示例展示了React表格组件的实现：

const FixedTable = (props) => {
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      fixed: 'left',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      fixed: 'right',
    },
  ];

  const data = [
    {
      name: '约翰·多伊',
      age: 30,
      address: '主街123号',
    },
    {
      name: '简·多伊',
      age: 25,
      address: '榆树街456号',
    },
    {
      name: '约翰·史密斯',
      age: 40,
      address: '橡树街789号',
    },
  ];

  return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />;
};

预览组件：放大、移动和切换图像

在展示图像时，预览功能可以显著提升用户体验。React的预览组件允许用户放大、移动和切换图像，提供更详细的视图和控制。

以下代码示例展示了React预览组件的实现：

const PreviewImage = (props) => {
  // 跟踪模态可见性
  const [visible, setVisible] = React.useState(false);

  const handlePreview = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div>
      <Image src={props.src} alt={props.alt} onClick={handlePreview} />
      <Modal visible={visible} footer={null} onCancel={handleClose}>
        <img src={props.src} alt={props.alt} style={{ width: '100%' }} />
      </Modal>
    </div>
  );
};