<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
#example{
padding: 50px;
background: #fff;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Letter = React.createClass({
render:function () {
//样式
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,//获取属性
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div style={letterStyle}>
{this.props.children} //获取
</div>
)
}
});
var destination = document.querySelector("#example");
ReactDOM.render(<div>
<Letter bgcolor="#58b3ff">R</Letter>
<Letter bgcolor="#ff605f">E</Letter>
<Letter bgcolor="#ffd52e">A</Letter>
<Letter bgcolor="#49dd8e">C</Letter>
<Letter bgcolor="#ae99ff">T</Letter>
</div>,destination)
</script>
</body>
</html>
