React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件
更新時(shí)間：2024年01月03日 16:49:01 作者：田本初
這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
如果想在React中想要像Vue一樣把css和js寫到一個(gè)文件中，可以使用CSS-in-JS。
使用CSS-in-JS
下載
npm i styled-components
使用
就像寫scss一樣，不過需要聲明元素的類型
基本語(yǔ)法及展示如下：
import styled from "styled-components"
export default () => {
const Father = styled.div`
width: 200px;
height: 200px;
background: pink;
span {
font-size: 20px;
}
&: hover {
background: skyblue;
}
`
const Son = styled.span`
color: #f8e;
`
return (
<>
<Father>
<Son>我是Son</Son>
</Father>
</>
)
}
也可以通過styled()選擇要繼承的樣式，并且可以拿到狀態(tài)。
import { useState } from "react"
import styled from "styled-components"
export default () => {
const Father = styled.div`
width: 200px;
height: 200px;
background: pink;
span {
font-size: 20px;
}
&: hover {
background: skyblue;
}
`
const Son = styled.span`
color: #f8e;
`
const Footer = styled(Father)`
display: ${({ isShow }) => (isShow ? "block" : "none")};
padding: 20px;
border: 1px solid #333;
border-radius: 30px;
`
const [show, setShow] = useState(false)
return (
<>
<Father>
<Son>我是Son</Son>
</Father>
<button onClick={() => setShow(!show)}>點(diǎn)我控制Footer的顯示/隱藏</button>
<Footer isShow={show}>我是Footer</Footer>
</>
)
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React將組件（component）看成一個(gè)狀態(tài)機(jī)（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實(shí)現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-11-11
通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
React Native Popup實(shí)現(xiàn)示例
本文主要介紹了React Native Popup實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn)的方法
這篇文章主要介紹了React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn),主要有兩種跳轉(zhuǎn)方式一種是編程式跳轉(zhuǎn)另一種是NavLink鏈接式跳轉(zhuǎn)，每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Input標(biāo)簽自動(dòng)校驗(yàn)功能去除實(shí)現(xiàn)
這篇文章主要為大家介紹了Input標(biāo)簽的自動(dòng)拼寫檢查功能去除實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了React如何接收excel文件下載導(dǎo)出功能封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react+antd4實(shí)現(xiàn)優(yōu)化大批量接口請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了如何使用react hooks + antd4實(shí)現(xiàn)大批量接口請(qǐng)求的前端優(yōu)化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02
這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06