react組件實例屬性props

来源:https://www.cnblogs.com/ucbb/archive/2023/01/29/17073870.html
-Advertisement-
Play Games

props props簡單使用 class Person extends React.Component { render() { return ( <ul> <li>姓名:{this.props.name}</li> <li>年齡:{this.props.age}</li> <li>性別:{thi ...


props

props簡單使用

        class Person extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>年齡:{this.props.age}</li>
                        <li>性別:{this.props.sex}</li>
                    </ul>
                )
            }
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));
        // 這裡props屬性要寫成key:"value"形式,但是會預設將value視為字元串,若想傳遞js類型的字面量,則要加{}
        root.render(<Person name="kl" age={19} sex="男" />);

props批量操作


        class Person extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>年齡:{this.props.age}</li>
                        <li>性別:{this.props.sex}</li>
                    </ul>
                )
            }
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));
        const p = { name: "lml", sex: "nan", age: 18 }
        root.render(<Person {...p} />);

props屬性類型限制

需要導入prop-type

https://unpkg.com/[email protected]/prop-types.js

        class Person extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>年齡:{this.props.age + 1}</li>
                        <li>性別:{this.props.sex}</li>
                    </ul>
                )
            }
        }
        // 對props限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func, // 限製為函數
        }
        // props預設值
        Person.defaultProps = {
            sex: '不男不女',
            age: 18,
        }
        function speak() {
            console.log('說話了');
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));
        // 這裡props屬性要寫成key:"value"形式,但是會預設將value視為字元串,若想傳遞js類型的字面量,則要加{}
        root.render(<Person name="lml" age={19} speak={speak} />);

props屬性限制的簡寫

        class Person extends React.Component {
            // 對props限制
            static propTypes = {
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
                speak: PropTypes.func, // 限製為函數
            }
            // props預設值
            static defaultProps = {
                sex: '不男不女',
                age: 18,
            }

            render() {
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>年齡:{this.props.age + 1}</li>
                        <li>性別:{this.props.sex}</li>
                    </ul>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById('test'));

        root.render(<Person name="lml" age={19} />);

函數組件使用props

        function People(props) {
            return (
                <ul>
                    <li>name:{props.name}</li>
                    <li>age:{props.age}</li>
                </ul>
            )
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));

        root.render(<People name="lml" age={19} />);

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 對於logback的模板來說,我們是可以自定義的,同時它也提供了一些公開的常量,比如%level,%thread這些,我們如果希望自定義這些常量,需要實現ClassicConverter抽象類,重寫它的convert方法。 系統變數 %thread 當前線程 %d{yyyy-MM-dd HH:mm: ...
  • 一、Lua應用場景 游戲開發 獨立應用腳本 Web 應用腳本 擴展和資料庫插件如:MySQL Proxy 和 MySQL WorkBench 安全系統,如入侵檢測系統 教程採用Aide Lua Pro或AndLua+開發安卓應用。在學習開發安卓應用前,先學習lua的基礎課程。 二、配置手機開發環境 ...
  • 怎麼從菜鳥程式員變成架構師 一、正確理解架構師的工作 架構師一般是不會去探討業務的範疇,他是把整個項目的結構搭出來,並讓程式員去填肉(業務功能部分) ,一般架構師的好壞決定這個項目的工期與質量,現在市面上看見的架構師一般都是別人的框架直接拿來用的,所以就不存在技術提升的範疇。很少會自己搭建框架。如果 ...
  • 一 引入 考慮實現一種機械泵控制項。 機械泵是工業中通常用來製造真空的一類設備,我們在繪製界面UI時希望可以生動形象地來表述一個機械泵,下麵講述了一種簡單的實現。 二 MechanicalPumpControl 聲明一個MechanicalPumpControl的自定義控制項,它繼承自Control類。 ...
  • 前言 Keil C51 是 51 系列相容單片機 C 語言軟體開發系統,支持 8051 微控制器體繫結構的 Keil 開發工具,適合每個階段的開發人員,不管是專業的應用工程師,還是剛學習嵌入式軟體開發的學生。 本篇博主將詳細介紹嵌入式集成開發環境 Keil C51 的安裝與註冊方法,以及國產 STC ...
  • xz是什麼 高壓縮率的工具,它使用 LZMA2 壓縮演算法,生成的壓縮文件比傳統使用的 gzip、bzip2 生成的壓縮文件更小, 不過xz也有一個壞處就是壓縮時間比較長,比7z壓縮時間還長一些。不過壓縮主要用於歸檔,不介意的可以忽略。 擅長壓縮文本和日誌文件,針對這塊的壓縮率,是目前我發現效率最高的 ...
  • Docker的常用命令 幫助命令 docker version # docker版本 docker info # 顯示docker的系統信息,包括鏡像和容器的數量 docker [命令] --help # 查看某個具體的命令 鏡像命令 查看下載的所有鏡像 # docker images REPOSI ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
一周排行
    -Advertisement-
    Play Games
  • MQTTnet 是一個高性能的MQTT類庫,支持.NET Core和.NET Framework。 MQTTnet 原理: MQTTnet 是一個用於.NET的高性能MQTT類庫,實現了MQTT協議的各個層級,包括連接、會話、發佈/訂閱、QoS(服務質量)等。其原理涉及以下關鍵概念: MqttCli ...
  • 在WPF中,源屬性(Source Property)指的是提供數據的屬性,通常是數據模型或者其他控制項的屬性,而目標屬性(Target Property)則是數據綁定的目標,通常是綁定到控制項的屬性,例如TextBlock的Text屬性。數據綁定將源屬性的值自動更新到目標屬性中。 主要包含以下幾個事件: ...
  • async/await 是 C# 中非同步編程的關鍵特性,它使得非同步代碼編寫更為簡單和直觀。下麵深入詳細描述了 async/await 的使用場景、優點以及一些高級使用方法,並提供了相應的實例源代碼。 使用場景: I/O 操作: 非同步編程特別適用於涉及 I/O 操作(如文件讀寫、網路請求等)的場景。在 ...
  • 使用過office的visio軟體畫圖的小伙伴都知道,畫圖軟體分為兩部分,左側圖形庫,存放各種圖標,右側是一個畫布,將左側圖形庫的圖標控制項拖拽到右側畫布,就會生成一個新的控制項,並且可以自由拖動。那如何在WPF程式中,實現類似的功能呢?今天就以一個簡單的小例子,簡述如何在WPF中實現控制項的拖拽和拖動,... ...
  • 1、Blazor Hybrid簡介 Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中,Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控制項。 組件不在瀏覽器 ...
  • 除了內置的數據集,scikit-learn還提供了隨機樣本的生成器。通過這些生成器函數,可以生成具有特定特性和分佈的隨機數據集,以幫助進行機器學習演算法的研究、測試和比較。 目前,scikit-learn庫(v1.3.0版)中有20個不同的生成樣本的函數。本篇重點介紹其中幾個具有代表性的函數。 1. ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------002實現通過文件對話框,選擇合適的文件夾,自定義預設的圖片保存位置,簡單易學 ...
  • 每次談到容器的時候,除了Docker之外,都會說起 Kubernetes,那麼什麼是 Kubernetes呢?今天就來一起學快速入門一下 Kubernetes 吧!希望本文對您有所幫助。 Kubernetes,一種用於管理和自動化雲中容器化工作負載的工具。 想象一下你有一個管弦樂隊,將每個音樂家視為 ...
  • 目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件(CSS,JS等)丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行,- 為了方便截圖乾凈,實現最小化程式到托盤運行,簡潔,勿擾,實現最小化程式到托盤運行, 實現托盤菜單功能,實現回顯主窗體, 實現托盤開始截屏, 實現氣泡信息提示,實現托盤程式提示,實現托盤退出程式, 封裝完... ...