React通過父組件傳遞類名給子組件的實現方法

React 教程

React 是一個用于構建用戶界面的 JAVASCRIPT 庫。
React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。

React 特點

1.聲明式設計 −React采用聲明范式，可以輕松描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

1.通過父組件傳遞類名給子組件的方法  （第十九行）

2.通過不同的狀態值，應用某些類名     （第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;

總結

以上所述是小編給大家介紹的React通過父組件傳遞類名給子組件的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com