React通過父組件傳遞類名給子組件的實(shí)現(xiàn)方法
React 教程
React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。
React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。
React 特點(diǎn)
1.聲明式設(shè)計(jì) −React采用聲明范式，可以輕松描述應(yīng)用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 − React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
1.通過父組件傳遞類名給子組件的方法 （第十九行）
2.通過不同的狀態(tài)值，應(yīng)用某些類名 （第22行）
import React from 'react'
import './style.css'
class PageTitle extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
timeType:0
}
}
handleClick(timeType){
this.setState({
timeType:timeType
});
this.props.handle(timeType+1);
}
render() {
const {title,dataList} = this.props;
return (
<h3 className={this.props.clasName+" cp_title"}>{title}
<div className="floatR">
{dataList.map((item,index) => {
return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
})}
</div>
</h3>
)
}
}
export default PageTitle;
總結(jié)
以上所述是小編給大家介紹的React通過父組件傳遞類名給子組件的實(shí)現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了React Hooks閉包陷阱的深入探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
mobx是一個輕量級的狀態(tài)管理器,所以很簡單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法,本文通過示例代碼介紹react mobx 基本用法,感興趣的朋友有一起看看2023-11-11
這篇文章主要介紹了React中的生命周期，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
以文本為例,為了實(shí)現(xiàn)無限循環(huán)的視覺效果,我們需要準(zhǔn)備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時,為兩段文本設(shè)置相同的滾動動畫,本文給大家介紹了基于React實(shí)現(xiàn)無限滾動表格,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了react 組件實(shí)現(xiàn)無縫輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在開發(fā)過程中，總是遇到很多列表的顯示。當(dāng)上數(shù)量級別的列表渲染于瀏覽器，終會導(dǎo)致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來解決這個問題2021-05-05
React?提供了許多常用的?Hooks，用于在函數(shù)組件中添加狀態(tài)管理、副作用處理和其他功能，本文主要介紹了其中幾個常用的，需要的可以收藏一下2023-07-07
React函數(shù)組件useContext useReducer自定義hooks
這篇文章主要為大家介紹了React函數(shù)組件useContext useReducer自定義hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08