React forwardRef：精通引用转发和组件 API，打造全球化应用

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

function SearchInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Imperatively focus the input when the component mounts
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <label htmlFor="search">Search:</label>
      <input id="search" type="text" ref={inputRef} placeholder="Enter your query" />
    </div>
  );
}

export default SearchInput;

            

              
                Copy
              
            
          

            // Parent Component
function ParentComponent() {
  const myFunctionalComponentRef = useRef(null);

  return <MyFunctionalComponent ref={myFunctionalComponentRef} />; // This will throw a warning/error
}

// Child Functional Component
function MyFunctionalComponent(props) {
  // ... some logic
  return <div>I am a functional component</div>;
}

            

              
                Copy
              
            
          

            // Child: Reusable Button Component
function FancyButton({ onClick, children }) {
  return (
    <button
      className="fancy-button"
      onClick={onClick}
      style={{ padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer' }}
    >
      {children}
    </button>
  );
}

// Parent Component
function Toolbar() {
  const saveButtonRef = useRef(null);

  const handleSave = () => {
    console.log('Save action initiated');
  };

  useEffect(() => {
    // How do we focus the FancyButton here?
    // saveButtonRef.current.focus() won't work if ref is passed directly to FancyButton
  }, []);

  return (
    <div style={{ display: 'flex', gap: '10px', padding: '10px', background: '#f0f0f0' }}>
      <FancyButton onClick={handleSave} ref={saveButtonRef}>Save</FancyButton> {/* Problematic */}
      <FancyButton onClick={() => console.log('Cancel')}>Cancel</FancyButton>
    </div>
  );
}

            

              
                Copy
              
            
          

            const EnhancedComponent = React.forwardRef((props, ref) => {
  // 'ref' here is the ref passed by the parent component
  return <div ref={ref}>Hello from EnhancedComponent</div>;
});

            

              
                Copy
              
            
          

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

// Child: Reusable Button Component (now supporting ref forwarding)
const FancyButton = React.forwardRef(({ onClick, children, ...props }, ref) => {
  return (
    <button
      ref={ref} // The forwarded ref is attached to the actual DOM button element
      className="fancy-button"
      onClick={onClick}
      style={{ padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer', ...props.style }}
      {...props}
    >
      {children}
    </button>
  );
});

// Parent Component
function Toolbar() {
  const saveButtonRef = useRef(null);

  const handleSave = () => {
    console.log('Save action initiated');
  };

  useEffect(() => {
    // Now, saveButtonRef.current will correctly point to the <button> DOM element
    if (saveButtonRef.current) {
      console.log('Focusing save button...');
      saveButtonRef.current.focus();
    }
  }, []);

  return (
    <div style={{ display: 'flex', gap: '10px', padding: '10px', background: '#f0f0f0' }}>
      <FancyButton onClick={handleSave} ref={saveButtonRef}>Save Document</FancyButton>
      <FancyButton onClick={() => console.log('Cancel')}>Cancel Operation</FancyButton>
    </div>
  );
}

export default Toolbar;

            

              
                Copy
              
            
          

            // Child: A custom styled input component
const StyledInput = React.forwardRef(({ label, ...props }, ref) => (
  <div style={{ marginBottom: '10px' }}>
    {label && <label style={{ display: 'block', marginBottom: '5px' }}>{label}:</label>}
    <input
      ref={ref} // Forward the ref to the native input element
      style={{
        width: '100%',
        padding: '8px',
        borderRadius: '4px',
        border: '1px solid #ccc',
        boxSizing: 'border-box'
      }}
      {...props}
    />
  </div>
));

// Parent: A login form that needs to focus the username input
function LoginForm() {
  const usernameInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  useEffect(() => {
    if (usernameInputRef.current) {
      usernameInputRef.current.focus(); // Focus username on mount
    }
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Access input values or perform validation
    console.log('Username:', usernameInputRef.current.value);
    console.log('Password:', passwordInputRef.current.value);
    // Imperatively clear password field if needed:
    // if (passwordInputRef.current) passwordInputRef.current.value = '';
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}>
      <h3>Global Login</h3>
      <StyledInput label="Username" type="text" ref={usernameInputRef} placeholder="Enter your username" />
      <StyledInput label="Password" type="password" ref={passwordInputRef} placeholder="Enter your password" />
      <button type="submit" style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        Log In
      </button>
    </form>
  );
}

export default LoginForm;

            

              
                Copy
              
            
          

            import React, { useEffect, useRef } from 'react';
// Imagine 'someChartLibrary' requires a DOM element to render its chart
// import { initChart } from 'someChartLibrary';

const ChartContainer = React.forwardRef(({ data, options }, ref) => {
  useEffect(() => {
    if (ref.current) {
      // In a real scenario, you would pass 'ref.current' to the third-party library
      // initChart(ref.current, data, options);
      console.log('Third-party chart library initialized on:', ref.current);
      // For demonstration, let's just add some content
      ref.current.style.width = '100%';
      ref.current.style.height = '300px';
      ref.current.style.border = '1px dashed #007bff';
      ref.current.style.display = 'flex';
      ref.current.style.alignItems = 'center';
      ref.current.style.justifyContent = 'center';
      ref.current.textContent = 'Chart Rendered Here by External Library';
    }
  }, [data, options, ref]);

  return <div ref={ref} style={{ minHeight: '300px' }} />; // The div that the external library will use
});

function Dashboard() {
  const chartRef = useRef(null);

  useEffect(() => {
    // Here you could call an imperative method on the chart if the library exposed one
    // For example, if 'initChart' returned an instance with an 'updateData' method
    if (chartRef.current) {
      console.log('Dashboard received ref for chart container:', chartRef.current);
      // chartRef.current.updateData(newData);
    }
  }, []);

  const salesData = [10, 20, 15, 25, 30];
  const chartOptions = { type: 'bar' };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Global Sales Dashboard</h2>
      <p>Visualize sales data across different regions.</p>
      <ChartContainer ref={chartRef} data={salesData} options={chartOptions} />
      <button style={{ marginTop: '20px', padding: '10px 15px' }} onClick={() => alert('Simulating chart data refresh...')}>
        Refresh Chart Data
      </button>
    </div>
  );
}

export default Dashboard;

            

              
                Copy
              
            
          

            // A custom button that can be focused
const AccessibleButton = React.forwardRef(({ children, ...props }, ref) => (
  <button ref={ref} style={{ padding: '12px 25px', fontSize: '16px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }} {...props}>
    {children}
  </button>
));

function KeyboardNavigatedMenu() {
  const item1Ref = useRef(null);
  const item2Ref = useRef(null);
  const item3Ref = useRef(null);

  const handleKeyDown = (e, nextRef) => {
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
      e.preventDefault();
      nextRef.current.focus();
    }
  };

  return (
    <div style={{ display: 'flex', gap: '15px', padding: '20px', background: '#e9ecef', borderRadius: '8px' }}>
      <AccessibleButton ref={item1Ref} onKeyDown={(e) => handleKeyDown(e, item2Ref)}>Item A</AccessibleButton>
      <AccessibleButton ref={item2Ref} onKeyDown={(e) => handleKeyDown(e, item3Ref)}>Item B</AccessibleButton>
      <AccessibleButton ref={item3Ref} onKeyDown={(e) => handleKeyDown(e, item1Ref)}>Item C</AccessibleButton>
    </div>
  );
}

export default KeyboardNavigatedMenu;

            

              
                Copy
              
            
          

            import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// Child: A Video Player component with imperative controls
const VideoPlayer = forwardRef(({ src, ...props }, ref) => {
  const videoElementRef = useRef(null);

  useImperativeHandle(ref, () => ({
    play: () => {
      console.log('Playing video...');
      videoElementRef.current.play();
    },
    pause: () => {
      console.log('Pausing video...');
      videoElementRef.current.pause();
    },
    seekTo: (time) => {
      console.log(`Seeking video to ${time} seconds...`);
      videoElementRef.current.currentTime = time;
    },
    // Expose current volume as a property
    getVolume: () => videoElementRef.current.volume
  }), []); // Empty dependency array means this handle is created once

  return (
    <div style={{ border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
      <video ref={videoElementRef} src={src} controls width="100%" {...props} />
      <p style={{ padding: '10px', background: '#f8f8f8', margin: '0' }}>
        <em>{src ? `Now playing: ${src.split('/').pop()}` : 'No video loaded'}</em>
      </p>
    </div>
  );
});

// Parent: A control panel for the video player
function VideoControlPanel() {
  const playerRef = useRef(null);
  const videoSource = "https://www.w3schools.com/html/mov_bbb.mp4"; // Example video source

  const handlePlay = () => {
    if (playerRef.current) {
      playerRef.current.play();
    }
  };

  const handlePause = () => {
    if (playerRef.current) {
      playerRef.current.pause();
    }
  };

  const handleSeek = (time) => {
    if (playerRef.current) {
      playerRef.current.seekTo(time);
    }
  };

  const handleGetVolume = () => {
    if (playerRef.current) {
      alert(`Current Volume: ${playerRef.current.getVolume()}`);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: 'auto' }}>
      <h2>Global Media Center</h2>
      <VideoPlayer ref={playerRef} src={videoSource} autoPlay={false} />
      <div style={{ marginTop: '15px', display: 'flex', gap: '10px' }}>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
        <button onClick={() => handleSeek(10)}>Seek to 10s</button>
        <button onClick={handleGetVolume}>Get Volume</button>
      </div>
    </div>
  );
}

export default VideoControlPanel;

            

              
                Copy
              
            
          

            import { render, screen, fireEvent } from '@testing-library/react';
import React, { useRef } from 'react';
import VideoPlayer from './VideoPlayer'; // Assume this is the component from above

describe('VideoPlayer component', () => {
  it('should expose play and pause methods via ref', () => {
    const playerRef = React.createRef();
    render(<VideoPlayer src="test.mp4" ref={playerRef} />);

    expect(playerRef.current).toHaveProperty('play');
    expect(playerRef.current).toHaveProperty('pause');

    // You might mock the actual video element's methods for true unit testing
    const playSpy = jest.spyOn(HTMLVideoElement.prototype, 'play').mockImplementation(() => {});
    const pauseSpy = jest.spyOn(HTMLVideoElement.prototype, 'pause').mockImplementation(() => {});

    playerRef.current.play();
    expect(playSpy).toHaveBeenCalled();

    playerRef.current.pause();
    expect(pauseSpy).toHaveBeenCalled();

    playSpy.mockRestore();
    pauseSpy.mockRestore();
  });
});

            

              
                Copy
              
            
          

            // Preferred for clarity in component libraries
const MyInput = React.forwardRef(function MyInput(props, ref) {
  // ...
});

// Or less verbose, but display name might be 'Anonymous'
const MyButton = React.forwardRef((props, ref) => {
  // ...
});

            

              
                Copy