React高阶组件：精通横切关注点

            
function UserProfile(props) {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {props.user.name}</p>
      <p>Email: {props.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

            
import React from 'react';

function withAuthentication(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isAuthenticated: false // Simulate authentication status
      };
    }

    componentDidMount() {
      // Simulate authentication check (e.g., using a token from localStorage)
      const token = localStorage.getItem('authToken');
      if (token) {
        this.setState({ isAuthenticated: true });
      } else {
        // Redirect to login page (replace with your actual routing logic)
        window.location.href = '/login';
      }
    }

    render() {
      if (this.state.isAuthenticated) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <p>Redirecting to login...</p>;
      }
    }
  };
}

export default withAuthentication;

            

              
                Copy
              
            
          

            
import withAuthentication from './withAuthentication';

const AuthenticatedUserProfile = withAuthentication(UserProfile);

// Use AuthenticatedUserProfile in your application

            

              
                Copy
              
            
          

            
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted.`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} unmounted.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

            

              
                Copy
              
            
          

            
function withData(url) {
  return function(WrappedComponent) {
    return class extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          data: null,
          loading: true,
          error: null
        };
      }

      async componentDidMount() {
        try {
          const response = await fetch(url);
          const data = await response.json();
          this.setState({ data, loading: false });
        } catch (error) {
          this.setState({ error, loading: false });
        }
      }

      render() {
        if (this.state.loading) {
          return <p>Loading...</p>;
        }

        if (this.state.error) {
          return <p>Error: {this.state.error.message}</p>;
        }

        return <WrappedComponent {...this.props} data={this.state.data} />;
      }
    };
  };
}

            

              
                Copy
              
            
          

            
import React, { createContext, useContext } from 'react';

// Create a context for translations
const TranslationContext = createContext();

// HOC to provide translations
function withTranslations(WrappedComponent, translations) {
  return function WithTranslations(props) {
    return (
      <TranslationContext.Provider value={translations}>
        <WrappedComponent {...props} />
      </TranslationContext.Provider>
    );
  };
}

// Hook to consume translations
function useTranslation() {
  return useContext(TranslationContext);
}

// Example usage
function MyComponent() {
  const translations = useTranslation();

  return (
    <div>
      <h1>{translations.greeting}</h1>
      <p>{translations.description}</p>
    </div>
  );
}

// Example translations
const englishTranslations = {
  greeting: 'Hello!',
  description: 'Welcome to my website.'
};

const frenchTranslations = {
  greeting: 'Bonjour !',
  description: 'Bienvenue sur mon site web.'
};

// Wrap the component with translations
const MyComponentWithEnglish = withTranslations(MyComponent, englishTranslations);
const MyComponentWithFrench = withTranslations(MyComponent, frenchTranslations);

            

              
                Copy
              
            
          

            
function DataProvider(props) {
  // Fetch data and pass it to the render prop
  const data = fetchData();
  return props.render(data);
}

// Usage:
<DataProvider render={data => (
  <MyComponent data={data} />
)} />

            

              
                Copy
              
            
          

            
import { useState, useEffect } from 'react';

function useData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Usage:
function MyComponent() {
  const { data, loading, error } = useData('/api/data');

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <div>{/* Render data here */}</div>;
}

            

              
                Copy