Reast自学篇-2

2022/4/23 开发开发 React 前端学习

Reast自学篇2

继续学习，诶嘿

[2.1]样式控制

样式控制和基本的HTML差不多，分为内联式和外联式，和HTML几乎完全一致

[2.1.1]内联式

很简单，上代码

const condType=false
function StyleApp(){
    return(
        <div>
               <p style={{color:"red",background: "black" }}>我是内联</p>#这里是重点
        </div>
    )
}
export default StyleApp

这里就用的是内联式，注意下，他和传统的写法还是有点不一样，走的是jsx，因此需要渲染一下，可以看到我们的代码是 style={{coloe:'red'`}}，在这里设置属性即可.

[2.1.2]外联样式

和我们传统的差不多，只不过需要先导入css，定义类名的时候标记也要改下

import './app_style.css';
const condType=false
function StyleApp(){
    return(
        <div>
            <p className="wailian">我是外链</p>
        </div>
    )
}
export default StyleApp

看，我们首先需要导入css文件，这个css文件的路径是取决于你这个 app.js所在的相对路径，这里注意下

同时，我们的类名标记也从 class改为 className了，其他就完全一致了

[2.2]动态类名

简单理解就是给HTML加上一个控制器，如果条件为true，则加载这个类名，反之不加载这个类名

上代码

import './app_style.css';
const condType=false
function StyleApp(){
    return(
        <div>
            <p className={condType ? "cond":"condno"}>我是条件判断外链</p>
        </div>
    )
}
export default StyleApp

这里我们看一下，和我们条件渲染差不多，都是给className这个标记赋予一个jsx对象，并且最终返回一个名称

简单理解就是这样

className等待接收值
{condType ? "cond":"condno"}这一串就是JSX，他最终会返回一个字符串过去(这里注意，condType是判断条件，他是个布尔，?代表判断,"cond":"condno"代表判断的结果，如果满足选前者，不满足选后者
className接收到值后写入自身
如果满足就返回 cond，不满足则返回 condno

这样就简单多了，我们在一开始定义了 condType为 False，那么下面这个JSX就判断为不满足返回 condno，此时类名为 condno

[2.3]小提示

React必须要一个父标签，并且只能有一个父标签，不能出现两个顶级标签，否则会炸，我们一般会使用 <div>标签来作为唯一的父标签，但是我们也可以选择使用幽灵标签 <>，来渲染父标签

原则上，JSX还是用的JS，因此最好遵守JS的规则，使用驼峰命名法来命名，如 loginType，友好的命名会帮助你更好的看懂代码

由于JSX用了HTML，因此标签必须闭合，不能存在只有一遍的标签，如 <div>xxxx，这样会导致崩溃，因此最好使用 <div>xxx</div>这样的方式来写标签

JSX支持换行来提高代码的可读性(防止一个标签一行飞了)，但是需要用括号包住，像这样 (<div></div>)

LOADING...