首頁  >  文章  >  web前端  >  實例詳解React透過父元件傳遞類別名稱給子元件

實例詳解React透過父元件傳遞類別名稱給子元件

小云云
小云云原創
2017-12-22 09:56:542357瀏覽

React 是一個用於建立使用者介面的 JAVASCRIPT 庫。本文主要介紹了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}
       <p 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>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

大家學完本文後應該更深入掌握React知識了吧。

相關推薦:

詳解React受控元件與非受控元件

React中元件的寫法有哪些

ReactJS中表單的單選多選與反選的實作方法

#

以上是實例詳解React透過父元件傳遞類別名稱給子元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn