【React自学笔记07】一些必备知识点

一、样式设置

1.内联样式

...

2.外部样式表

...

3.模块化css

使用步骤：

1. 创建一个xxx.module.css

2. 在组件中引入css import classes from './App.module.css';

3. 通过classes来设置类 className={classes.p1}

特点：

CSS模块可以动态的设置唯一的class值，react会对类名重命名，脚本自动生成

import React, {useState} from 'react';
import classes from './App.module.css';
import A from "./A";

const App = () => {
    const [showBorder, setShowBorder] = useState(false);
    const clickHandler = () => {
        setShowBorder(true);
    };
    return (
        <div>
            <A/>
            <p className={`${classes.p1} ${showBorder ? classes.Border : ''}`}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};
export default App;

//App.module.css
.p1{
    color: red;
    background-color: #bfa;
}
.Border{
    border: 1px red solid;
}

二、外部容器

React.Fragment

• 是一个专门用来作为父容器的组件
  • 它只会将它里边的子元素直接返回，不会创建任何多余的元素
• 当我们希望有一个父容器，但同时又不希望父容器在网页中产生多余的结构时，就可以使用Fragment

//App.js
import React,{Fragment} from 'react'
const App=()=>{
    return (
    	<Fragment>
        	<div>第一个组件</div>
        	<div>第二个组件</div>
        	<div>第三个组件</div>
        </Fragment>
    )
}
export default App;

import React from 'react';
const App = () => {
    return (
        <>
           <div>第一个组件</div>
           <div>第二个组件</div>
           <div>第三个组件</div>
        </>
    );
};
export default App;

三、公共context

Context相当于一个公共的存储空间，我们可以将多个组件中都需要访问的数据统一存储到一个Context中，这样无需通过props逐层传递，即可使组件访问到这些数据。通过React.createContext()创建context