ReactJS - getChildContext() 方法

getChildContext()

import PropTypes from 'prop-types';
import React, { Component } from 'react';

// Create a context
const UserContext = React.createContext({
	 	username: 'Guest',
	 	age: 0,
});

// Create a component
class UserProvider extends Component {
	 	// Define child context types
	 	static childContextTypes = {
	 	 	 user: PropTypes.shape({
	 	 	 username: PropTypes.string,
	 	 	 age: PropTypes.number,
	 	}),
	 	}; 		
	 	getChildContext() {
	 	 	 return {
	 	 	 	 	user: {
	 	 	 	 	 	 username: this.props.username,
	 	 	 	 	 	 age: this.props.age,
	 	 	 	 	},
	 	 	 };
	 	}
	 	
	 	render() {
	 	 	 // Render the child components
	 	 	 return this.props.children;
	 	}
}

// Create a component that consumes user data from context
class UserInfo extends Component {
	 	static contextTypes = {
	 	 	 user: PropTypes.shape({
	 	 	 	 	username: PropTypes.string,
	 	 	 	 	age: PropTypes.number,
	 	 	 }),
	 	}; 		
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <p>Welcome, {this.context.user.username}!</p>
	 	 	 	 	 	 <p>Your age: {this.context.user.age}</p>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

// Create the main App component
class App extends Component {
	 	render() {
	 	 	 return (
	 	 	 	 	// Wrap the UserInfo component with the UserProvider
	 	 	 	 	<UserProvider username="Amit" age={25}>
	 	 	 	 	 	 <UserInfo />
	 	 	 	 	</UserProvider>
	 	 	 );
	 	}
}

export default App;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// Create a context for the theme
const ThemeContext = React.createContext({
	 	theme: 'light',
	 	toggleTheme: () => {},
});

// Create a component for providing the theme
class ThemeProvider extends Component {
	 	
	 	// Define child context types
	 	static childContextTypes = {
	 	 	 themeContext: PropTypes.shape({
	 	 	 	 	theme: PropTypes.string,
	 	 	 	 	toggleTheme: PropTypes.func,
	 	 	 }),
	 	};
	 	
	 	// Set initial state
	 	state = {
	 	 	 theme: 'light',
	 	};
	 	
	 	// Define a function to toggle the theme
	 	toggleTheme = () => {
	 	 	 this.setState((prevState) => ({
	 	 	 	 	theme: prevState.theme === 'light' ? 'dark' : 'light',
	 	 	 }));
	 	};
	 	
	 	// Provide the theme context through getChildContext()
	 	getChildContext() {
	 	 	 return {
	 	 	 	 	themeContext: {
	 	 	 	 	 	 theme: this.state.theme,
	 	 	 	 	 	 toggleTheme: this.toggleTheme,
	 	 	 	 	},
	 	 	 };
	 	}
	 	
	 	render() {
	 	 	 // Render the child components
	 	 	 return this.props.children;
	 	}
}

// Create a component
class ThemedComponent extends Component {
	 	// Define context types
	 	static contextTypes = {
	 	 	 themeContext: PropTypes.shape({
	 	 	 	 	theme: PropTypes.string,
	 	 	 	 	toggleTheme: PropTypes.func,
	 	 	 }),
	 	};
	 	
	 	render() {
	 	 	 return (
	 	 	 	 	<div style={{ background: this.context.themeContext.theme === 'light' ? '#fff' : '#333', color: this.context.themeContext.theme === 'light' ? '#333' : '#fff' }}>
	 	 	 	 	 	 <p>Current Theme: {this.context.themeContext.theme}</p>
	 	 	 	 	 	 <button onClick={this.context.themeContext.toggleTheme}>Toggle Theme</button>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

// Create the main App component
class ThemeApp extends Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<ThemeProvider>
	 	 	 	 	 	 <ThemedComponent />
	 	 	 	 	</ThemeProvider>
	 	 	 );
	 	}
}

export default ThemeApp;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// Create a context for user authentication
const AuthContext = React.createContext({
	 	isAuthenticated: false,
	 	login: () => {},
	 	logout: () => {},
});

// Create a component for providing authentication context
class AuthProvider extends Component {
	 	static childContextTypes = {
	 	 	 authContext: PropTypes.shape({
	 	 	 	 	isAuthenticated: PropTypes.bool,
	 	 	 	 	login: PropTypes.func,
	 	 	 	 	logout: PropTypes.func,
	 	 	 }),
	 	};
	 	
	 	// Set initial state
	 	state = {
	 	 	 isAuthenticated: false,
	 	};
	 	
	 	// Define a function to handle user login
	 	login = () => {
	 	 	 this.setState({
	 	 	 	 	isAuthenticated: true,
	 	 	 });
	 	};
	 	
	 	// Define a function to handle user logout
	 	logout = () => {
	 	 	 this.setState({
	 	 	 	 	isAuthenticated: false,
	 	 	 });
	 	};
	 	
	 	// Provide the authentication context through getChildContext()
	 	getChildContext() {
	 	 	 return {
	 	 	 	 	authContext: {
	 	 	 	 	 	 isAuthenticated: this.state.isAuthenticated,
	 	 	 	 	 	 login: this.login,
	 	 	 	 	 	 logout: this.logout,
	 	 	 	 	},
	 	 	 };
	 	}
	 	
	 	render() {
	 	 	 // Render the child components
	 	 	 return this.props.children;
	 	}
}

// Create a component that consumes the authentication context
class AuthComponent extends Component {
	 	// Define context types
	 	static contextTypes = {
	 	 	 authContext: PropTypes.shape({
	 	 	 	 	isAuthenticated: PropTypes.bool,
	 	 	 	 	login: PropTypes.func,
	 	 	 	 	logout: PropTypes.func,
	 	 	 }),
	 	};
	 	
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <p>User is {this.context.authContext.isAuthenticated ? 'authenticated' : 'not authenticated'}</p>
	 	 	 	 	 	 {this.context.authContext.isAuthenticated ? (
	 	 	 	 	 	 	 	<button onClick={this.context.authContext.logout}>Logout</button>
	 	 	 	 	 	 ) : (
	 	 	 	 	 	 	 	<button onClick={this.context.authContext.login}>Login</button>
	 	 	 	 	 	 )}
	 	 	 	 	</div>
	 	 	 );
	 	}
}

// Create the main App component
class App extends Component {
	 	render() {
	 	 	 return (
	 	 	 	 	<AuthProvider>
	 	 	 	 	 	 <AuthComponent />
	 	 	 	 	</AuthProvider>
	 	 	 );
	 	}
}

export default App;