React通過(guò)父組件傳遞類(lèi)名給子組件的實(shí)現(xiàn)方法
React 教程
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。
React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開(kāi)源。
React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開(kāi)始關(guān)注和使用它。
React 特點(diǎn)
1.聲明式設(shè)計(jì) −React采用聲明范式，可以輕松描述應(yīng)用。
2.高效 −React通過(guò)對(duì)DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫(kù)或框架很好地配合。
4.JSX − JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開(kāi)發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開(kāi)發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 − React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。
1.通過(guò)父組件傳遞類(lèi)名給子組件的方法 （第十九行）
2.通過(guò)不同的狀態(tài)值，應(yīng)用某些類(lèi)名 （第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通過(guò)父組件傳遞類(lèi)名給子組件的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何基于React封裝一個(gè)層次模糊效果的容器組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng)思路詳解
這篇文章主要介紹了react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
React倒計(jì)時(shí)功能實(shí)現(xiàn)代碼——解耦通用
這篇文章主要介紹了React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
react項(xiàng)目中@路徑簡(jiǎn)單配置指南
這篇文章主要給大家介紹了關(guān)于react項(xiàng)目中@路徑簡(jiǎn)單配置的相關(guān)資料,文中還介紹了React配置@路徑別名的方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
從零開(kāi)始最小實(shí)現(xiàn)react服務(wù)器渲染詳解
這篇文章主要介紹了從零開(kāi)始最小實(shí)現(xiàn)react服務(wù)器渲染詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁(yè)的方法
本篇文章主要介紹了react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁(yè)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
優(yōu)雅的在React項(xiàng)目中使用Redux的方法
這篇文章主要介紹了優(yōu)雅的在React項(xiàng)目中使用Redux的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
手挽手帶你學(xué)React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
react?component?function組件使用詳解
這篇文章主要為大家介紹了react?component?function組件的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11