开发者学堂课程【React 入门与实战：在组件中使用 style 行内样式并封装样式对象】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8109
在组件中使用 style 行内样式并封装样式对象
内容介绍
一、美化页面
二、封装
一、美化页面
先美化大标题：
在 CmtList.jsx 中
render() {return <div>
<h1 style="colpr:red;">
这是评论列表组件</h1>
保存出现报错：
The ‘style’prop expects a mapping from style
properties to values,not a string.For
example,style={{marginRight:spacing+’em’}}when using JSX.
在 JSX 中写 state 样式的不能直接写字符串。
外层 { }表示要写 js，里面（）表示样式对象。
所以：
{/*注意:在JSX中，如果想写行内样式了，不能为style设置字符串的值*/}
{/*而是应该这么写:style={ { color: 'red'}}*/}
{/* <h1 style="color:red; ">这是评论列表组件</h1>*/}
在行内样式中，如果是数值类型的样式，则可以不用引号包裹，如果是字符串类型的样式值必须使用引号包裹。
比如写入 zIndex：3 执行不会出现报错。
<h1 style={ { color:I 'red ', fontsize：‘35px’}}>
//这是评论列表组件
</h1>
字体比模板粗并且居中所以加一个样式：
fontWeight：200，textAlign：‘center’
接下来美化列表里：
在外层有虚线并且有距离，字体与虚线有距离，有阴影：
return <div style={{
border: '1px dashed #ccc ' ,
margin: '10px',
padding: '10px
boxShadow:'0 0 10px #ccc '}}>
接下来把文字变小：
<h1 style={{ fontSize: '14px’}}>评论人: {props.user}</h1>
<p style={{fontsize: '12px'}}>评论内容: {props.content}</p>
二、封装
这样写结构变得繁琐，对结构进行优化，内部的方法代表对象。
对象也可以直接写在外边：
const itemStyle : [ border: ‘1px dashed #ccc ' , margin: ‘10px', padding: ‘10px', boxShadow: '0 0 10px #ccc'
const userStyle = { fontSize: '14px’}
const contentstyle = { fontSize: '12px’}
export default function CmtItem(props) {
return <div style={itemStyle}>
<h1 style={userStyle}>评论人: {props.user}</h1>
<p style={contentStyle}>评论内容:{props.content}</p>
</div>
}
这是第一层封装，将样式对象和 UI 结构分离。
第二层封装合并成大的样式对象：
const styles = {
item: { border: '1px dashed #cce ' , margin: '10px', padding: '10px', boxShadow: '0 0 10px tc.c' ),
user: { fontSize: '14px’}，
content: { fontSize: '12px’}
export default function CmtItem(props) {
return <div style={styles.item}>
<h1 style={styles.user}>评论人: {props.user}</h1>
<p style={styles.content}>评论内容:{props.content}</p>
</div>
把三个不相关的样式封装成一个大样式，JS 对象，还可以继续封装成 js 文件放到单独的模块中：
新建一个 styles.js 文件，
export default iconst styles ={
item: { border: '1px dashed #ccc ' , mangin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' },
user: { fontSize: '14px’}，
content: { fontSize: '12px’}
让外界拿到这个对象：
import styles from '@/components/styles'
这是第三层封装，抽离为单独的样式表模块。
