代码:

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

const X = (props) => {
	return <div>Colin</div>;
}

const Y = (props) => {
	return <div>Google</div>;
}

const Z = (props) => {
	return <div>Sean</div>;
}

//This is a Higher Order Component
const Circlize = (Element) => {
	let _style = {
		display:'inline-block',
		background:'black',
		color:'white',
		width:'200px',
		height:'200px',
		lineHeight:'200px',
		borderRadius:'50%',
		textAlign:'center',
		margin:'25px',
	}
	//This props belongs to the parent compoment not the child!
	return (props) => {
		return <div style={_style}><Element/></div>;
	} 
}

const CircleA = Circlize(X);
const CircleB = Circlize(Y);
const CircleC = Circlize(Z);

const App = (props) => {
	return (
		<div>
			<CircleA />
			<CircleB />
			<CircleC />
		</div>
	);
}

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

最后的展示如下:

=)