先看看用内联样式方式给react组件加样式：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
const styleElement = (
<div>
<!--可以忽略px，react默认把数字视为px-->
<div style={{paddingLeft: '30px'}}>我是一个盒子</div>
</div>
)
ReactDOM.render(styleElement, rootElement)
</script>
我们看到与HTML不同的是，JSX中传递给style属性的是个对象，而HTML中是字符串。另外CSS属性的名字是以驼峰风格书写的，属性值为字符串。
下面看看如何使用className：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<style>
.box {
border: 1px solid red;
}
.box-small {
width: 50px;
height: 50px;
}
.box-medium {
width: 100px;
height: 100px;
}
.box-large {
width: 150px;
height: 150px;
}
</style>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
const styleElement = (
<div>
<div className="box box-small" style={{paddingLeft: '30'}}>我是一个盒子</div>
</div>
)
ReactDOM.render(styleElement, rootElement)
</script>
我们看到在JSX中应用样式名的话使用的属性是className，在HTML中是class。
看起来更清晰的写法：
const props = {
className="box box-small",
style={{paddingLeft: 30}},
}
<div {...props}></div>
下面我们把组件编程函数组件：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<style>
.box {
border: 1px solid red;
}
.box-small {
width: 50px;
height: 50px;
}
.box-medium {
width: 100px;
height: 100px;
}
.box-large {
width: 150px;
height: 150px;
}
</style>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
function Box(props) {
return (
<div className="box box-small" style={{paddingLeft: 30}} {...props}></div>
)
}
const styleElement = (
<div>
<Box style={{backgroundColor: 'red'}}>我是一个盒子</Box>
</div>
)
ReactDOM.render(styleElement, rootElement)
</script>
函数组件默认有className和style值，在使用时，重新给style赋了值，结果当然是覆盖了默认值。
那我们想不覆盖，只添加怎么办？
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<style>
.box {
border: 1px solid red;
}
.box-small {
width: 50px;
height: 50px;
}
.box-medium {
width: 100px;
height: 100px;
}
.box-large {
width: 150px;
height: 150px;
}
</style>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
//重点看参数如何定义
function Box({style, ...rest}) {
return (
<div className="box box-small" style={{paddingLeft: 30, ...style}} {...rest}></div>
)
}
const styleElement = (
<div>
<Box style={{backgroundColor: 'red'}}>我是一个盒子</Box>
</div>
)
ReactDOM.render(styleElement, rootElement)
</script>
这样既保留了默认属性值，又可以在此基础上添加新的值，这就要看你的组件想怎么设计了。
className可以同样这样处理：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<style>
.box {
border: 1px solid red;
}
.box-small {
width: 50px;
height: 50px;
}
.box-medium {
width: 100px;
height: 100px;
}
.box-large {
width: 150px;
height: 150px;
}
</style>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
//重点看参数如何定义，看默认className怎么写
function Box({style, className, ...rest}) {
return (
<div className={`box ${className}`} style={{paddingLeft: 30, ...style}} {...rest}></div>
)
}
const styleElement = (
<div>
<Box style={{backgroundColor: 'red'}} className="box-small">我是一个盒子</Box>
</div>
)
ReactDOM.render(styleElement, rootElement)
</script>
这里唯一有个小小的缺陷，如果我们在使用Box组件时，没有给className赋值，会出现如图1的情况：
图1
如何解决呢？在定义函数组件参数的时候，给个默认值就好了。
//className默认值为空字符串
function Box({style, className = '', ...rest}) {
return (
<!--有人说这样还会多一个空格啊，完美主义者可以加个trim-->
<div className={`box ${className}`.trim()} style={{paddingLeft: 30, ...style}} {...rest}> </div>
)
}
为啥style没有这个缺陷？开头说了style传的是对象哦，CSS天生键值对的形式恰恰又和对象相符，再加上spread操作符，可见react设计得周到和巧妙。
网友评论