另一个HIGHER ORDER COMPONENT的例子,含Anonymous Class

如下:


import React from 'react';
import ReactDOM from 'react-dom';


const Btn = function(props){
	return (
		<button onClick={() => alert(props.message)}>{props.name}</button>
	);
}


function AlertBtn(El){
	
	return (message) => {
	
		//Return a anonymous class
		return class extends React.Component{
			
			constructor(props){
				super(props);
			}
			
			render(){		
				
				return(
					<El message={`Message : ${message} !`} name={message} />
				)
				
			}
			
		}//Class End
		
	}
	
}


const HocBtn = AlertBtn(Btn)('SAMPLE BUTTON');


const App = function(props){
	return (
		<div><HocBtn /></div>
	);
}


ReactDOM.render(
	<App />
	,
	document.getElementById('root')
);