React组件:需要格式化来自API响应的地址，并将其传递给具有复制到剪贴板功能的组件

import React, { useState, useEffect } from 'react';

// 格式化地址的函数
function formatAddress(address) {
  return address.replace(/,/g, '\n');
}

// 复制到剪贴板的组件
function CopyToClipboard({ text }) {
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setIsCopied(true);
    } catch (err) {
      console.error('Failed to copy text: ', err);
    }
  };

  return (
    <div>
      <textarea value={text} readOnly />
      <button onClick={copyToClipboard}>Copy</button>
      {isCopied && <span>Copied!</span>}
    </div>
  );
}

// 主组件
function AddressComponent() {
  const [address, setAddress] = useState('');

  useEffect(() => {
    // 模拟从API获取地址
    fetch('https://api.example.com/address')
      .then(response => response.json())
      .then(data => {
        setAddress(formatAddress(data.address));
      });
  }, []);

  return (
    <div>
      <h1>Formatted Address</h1>
      <p>{address}</p>
      <CopyToClipboard text={address} />
    </div>
  );
}

export default AddressComponent;