样式在react中的应用
你问我为什么写博客? 因为阿拉斯加爱写bugger!!!
微信公众号:爱写bugger的阿拉斯加 如有问题或建议,请往公众号,我们一起交流如何写bugger !
书接上文——react 基础之组件篇一 本节精彩继续,阿拉斯加继续装逼如何优雅的写bugger!!!
样式如下:
<style type="text/css">
#container {
padding: 50px;
background-color: #FFF;
}
.letter {
padding: 50px;
color: red;
font-size: 30px;
border: 1px solid red;
}
</style>
组件上这样写:
<body>
<div id="container"></div>
<script type="text/babel">
var Letter = React.createClass({
render: function(){
return (
<div className='letter'>
{this.props.children}
</div>
);
}
})
var destination = document.querySelector("#container");
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">Letter</Letter>
</div>,
destination
)
</script>
</body>
注意:组件上的类名属性 className 要驼峰命名法,因为要按照javascript的语法。
效果如下:
className
通过直接定义 style 来定制化样式 怎样定制,如下:
<body>
<div id="container"></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("#container");
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">Letter1</Letter>
<Letter bgcolor="red">Letter2</Letter>
<Letter bgcolor="pink">Letter3</Letter>
<Letter bgcolor="yellow">Letter4</Letter>
</div>,
destination
)
</script>
</body>
注意:css属性也要驼峰命名法,因为要按照javascript的语法。 如:css上的 background-color -> backgroundColor
效果如图:
image.png
虽然看上去很简单,但是建议初学者自己敲一遍,可能会出现各种各样的问题。学习,千万不能有所见即所得的想法,实践才是检验真理的唯一标准。
本节内容完毕!下节内容:「react 基础之组件篇三」 将讲解 设计复合组件。
原代码我都已经上传到 github了,有兴趣的可以去了解一下。
传送门 :https://github.com/biaochenxuying/react-learning