class
- JSX 元素不能直接使用 class 属性
- 因为 class 在 js 语言内是一个关键字
- 如果要使用 class 属性，需要书写成 className
书写 class 样式不使用 { } 解析
- 在标签属性内 添加 className=“bg” 属性，bg 是 class 名
<head>
<style>
.bg {
background: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const bg = "bg";
ReactDOM.render((
<div className="bg">设置 css 样式</div>
), document.querySelector("#root"));
</script>
书写 class 样式使用差值表达式 { } 解析
- 在标签属性内 添加 className="{bg}" 属性，bg 是 class 名
<head>
<style>
.bg {
background: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const bg = "bg";
ReactDOM.render((
<div className={
bg}>设置 css 样式</div>
), document.querySelector("#root"));
</script>
style
- 书写 style 时，需要使用差值表达式 {
{}} 例如：style={
{}}
- 因为 第 1 个花括号会作为 jsx 语法解析，第 2 个为对象
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<div style={
{
width: "200px",
height: "200px",
background: "green"
}}>设置 style 样式</div>, document.querySelector("#root"));
</script>
</body>