React.js create a like flash's color plate feature

ReactCreatColorPanel.css

*{
 box-sizing: border-box;
}
.blockBorder{
	border: 1px solid #000;
}

ReactCreatColorPanel.html

<div id="root"></div>

ReactCreatColorPanel.js

//@see https://codepen.io/lynxerzhang/pen/evamLP?editors=0011
//React (es6)
class ColorBlock extends React.Component
{
	static propTypes = {
		color: React.PropTypes.string
	};
	static defaultProps = {
		color: "#000000"
	};
	clickHandler = (event) => {
		this.props.colorClick(this.props.color);
		//console.log("click color rgb is : " + this.props.color);
		//console.log("click color block is :" + this.refs.block);
	};
	render(){
		let style = {
			width:20,
			height:20,
			backgroundColor: this.props.color,
			float:"left"
		};
		return (
			<div style={style} className="blockBorder" ref="block" onClick={this.clickHandler}></div>
		)
	}
}

class ColorArea extends React.Component 
{
	static propTypes = {
		headcolor: React.PropTypes.string,
		colorClick: React.PropTypes.func
	};
	static defaultProps = {
		headcolor: "#00"
	};
	constructor(props){
		super();
		this.color = (() => {
			let colorAry = [];
			let s = 0, d = 0;
			let g = "", b = "";
			var i = 0, k = 0;
			for(i = 0; i < 6; i ++){
				d = 0;
				for(k = 0; k < 6; k ++){
					g = d.toString(16).toUpperCase();
					b = s.toString(16).toUpperCase();
					colorAry.push(props.headcolor + g.padStart(2, g) + b.padStart(2, b));
					d += 51;
				}
				s += 51;
			}
			return colorAry;
		})()
	}
 	render() {
		let style = {
			backgroundColor: "#333333",
			height: 120,
			width: 120,
			float:"left"
		};
		return (<div style={style}>
				{	
					this.color.map((c) => <ColorBlock color={c} colorClick={(color) => {this.props.colorReceive(color)}}></ColorBlock>)
				}
				</div>)		
 	}
}

class ColorPanel extends React.Component 
{	
	static propTypes = {
		colorReceive: React.PropTypes.func
	};
	constructor(props){
		super();
		this.color = ["#00", "#33", "#66", "#99", "#CC", "#FF"];
	}
	onReceiveColorCallback(color){
		this.refs.logPanel.setState({colorStr:color});
	}
 	render() {
		let style = {
			backgroundColor: "#333333",
			height: 240,
			width: 360
		};
		return (
			<div>
				<div style={style}>
					{
						this.color.map((c) => <ColorArea headcolor={c} colorReceive={(color) => {this.onReceiveColorCallback(color)}}></ColorArea>)
					}
				</div>
				<div>
					<ShowColorPanel ref="logPanel"/>
				</div>
			</div>
		)
 	}
}

class ShowColorPanel extends React.Component {
	constructor() {
		super();
		this.state = {
			colorStr: ""
		};
	}
	render() {
		let color = `RGB is ${this.state.colorStr}`;
		return(
			<div>{color}</div>
		)
	}
}

//解释为何在render方法中的return包含括号的原因
//http://buildwithreact.com/tutorial/components
//http://jamesknelson.com/javascript-return-parenthesis/

//关于React和ReactDOM的差异
//https://stackoverflow.com/questions/34114350/react-vs-reactdom
ReactDOM.render(<ColorPanel />, document.getElementById('root'));