React-組件和props

?1、類組件

import React from 'react';
class ClassApp extends React.Component {constructor(props) {super(props);this.state={};}render() {return (<div><h1>這是一個類組件</h1><p>接收父組件傳過來的值:{this.props.name}</p></div>);}
}
export default ClassApp;

2、函數組件

import React from 'react';
function FuncApp(props) {return (<div><h1>我是函數組件</h1><h2>接收父組件傳過來的值:{props.name}</h2></div>);
}

3、組件樣式控制

import './index.css';
function FuncApp(props) {return (<div><h1 style={{ color: 'red', fontSize: 25 }}>我是函數組件</h1><h2 className='info-box'>接收父組件傳過來的值:{props.name}</h2></div>);
}// index.css
.info-box {color: skyblue;font-size: 25px;
}

4、React表單組件

React中的表單組件大致可分為兩類:

  • 受控組件:一般涉及到表單元素時我們才會使用這種分類方法。受控組件的值由props或state傳入,用戶在元素上交互或輸入內容會引起應用state的改變。在state改變之后重新渲染組件,我們才能在頁面中看到元素中值的變化,假如組件沒有綁定事件處理函數改變state,用戶的輸入是不會起到任何效果的,這也就是“受控”的含義所在。
  • 非受控組件:類似于傳統的DOM表單控件,用戶輸入不會直接引起應用state的變化,我們也不會直接為非受控組件傳入值。想要獲取非受控組件,我們需要使用一個特殊的ref屬性,同樣也可以使用defaultValue屬性來為其指定一次性的默認值。
//受控組件
this.state = {value: "默認值"
}
change(event) {this.setState({value: event.target.value})
}
<div><input type="text" value={this.state.value} onChange={this.change.bind(this)} /><p> {this.state.value} </p>
</div>// hooks寫法
import { useState } from "react";
function App() {const [name, setName] = useState('')return (<div className="App"><input type="text" value={name} onChange={(e) => setName(e.target.value)} /></div>);
}
export default App;//非受控組件
<input type="text" defaultValue="hello!"/>

5、React獲取dom元素

????????在react中操作dom,可以使用useRef鉤子函數

(1)使用useRef創建ref對象,并于JSX綁定

import { useRef } from "react";
function App() {const inputRef = useRef(null)return (<div className="App"><input type="text" ref={inputRef} /><button onClick={showDom}>顯示dom</button></div>);
}
export default App;

(2)在DOM可用時,通過inputRef.current拿到DOM對象

const showDom = () => {console.log(inputRef.current);
}

6、props

(1)定義和使用props

????????react中的每一個組件,都包含有一個屬性(props),屬性主要是從父組件傳遞給子組件的?

// 父組件
function App() {const name = '張三'return (<div className="App"><Son name={name} /></div>);
}// 子組件
function Son(props) {return (<div>{ props.name }</div>)
}

(2)特殊的prop children(類似于Vue的插槽)

????????當我們把內容嵌套在子組件標簽中時,父組件會自動在名為children的prop屬性中接收該內容

// 父組件
function App() {const name = '張三'return (<div className="App"><Son name={name}><span>hello</span></Son></div>);
}// 子組件
function Son(props) {return (<div>{ props.children }--{ props.name}</div>)
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78387.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78387.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78387.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

談談接口和抽象類有什么區別?

接口&#xff08;interface&#xff09;和抽象類&#xff08;abstract class&#xff09;都是 Java 中常用的“抽象”工具&#xff0c;用來定義類的規范和結構&#xff0c;但它們有一些本質的區別。下面我用一個簡單明了的表格 說明來幫你理解&#xff1a; 對比點抽象類&…

使用Nacos 打造微服務配置中心

一、背景介紹 Nacos 作為服務注冊中心的使用方式&#xff0c;同時 Nacos 還可以作為服務配置中心&#xff0c;用于集中式維護各個業務微服務的配置資源。 作為服務配置中心的交互流程圖如下。 這樣設計的目的&#xff0c;有一個明顯的好處就是&#xff1a;有利于對各個微服務…

OpenCv高階(十一)——物體跟蹤

文章目錄 前言一、OpenCV 中的物體跟蹤算法1、均值漂移&#xff08;Mean Shift&#xff09;&#xff1a;2、CamShift&#xff1a;3、KCF&#xff08;Kernelized Correlation Filters&#xff09;&#xff1a;4、MIL&#xff08;Multiple Instance Learning&#xff09;&#xf…

聲音分離人聲和配樂base,vocals,drums -從頭設計數字生命第6課, demucs——仙盟創夢IDE

demucs -n htdemucs --two-stemsvocals 未來之窗.mp3 demucs -n htdemucs --shifts5 之.mp3demucs -n htdemucs --shifts5 -o wlzcoutspl 未來之窗.mp3 伴奏提取人聲分離技術具有多方面的重大意義&#xff0c;主要體現在以下幾個領域&#xff1a; 音樂創作與制作 創作便利…

使用若依二次開發商城系統-4:商品屬性

功能3&#xff1a;商品分類 功能2&#xff1a;商品品牌 功能1&#xff1a;搭建若依運行環境前言 商品屬性功能類似若依自帶的字典管理&#xff0c;分兩步&#xff0c;先設置屬性名&#xff0c;再設置對應的屬性值。 一.操作步驟 1&#xff09;數據庫表product_property和pro…

操作指南:vLLM 部署開源大語言模型(LLM)

vLLM 是一個專為高效部署大語言模型&#xff08;LLM&#xff09;設計的開源推理框架&#xff0c;其核心優勢在于顯存優化、高吞吐量及云原生支持。 vLLM 部署開源大模型的詳細步驟及優化策略&#xff1a; 一、環境準備與安裝 安裝 vLLM 基礎安裝&#xff1a;通過 pip 直接安裝…

32.768kHz晶振詳解:作用、特性及與其他晶振的區別

一、32.768kHz晶振的核心作用 實時時鐘&#xff08;RTC&#xff09;驅動&#xff1a; 提供精確的1Hz時鐘信號&#xff0c;用于計時功能&#xff08;如電子表、計算機CMOS時鐘&#xff09;。 分頻公式&#xff1a; 1Hz 32.768kHz / 2^15&#xff08;通過15級二分頻實現&#x…

第3講、大模型如何理解和表示單詞:詞嵌入向量原理詳解

1. 引言 大型語言模型&#xff08;Large Language Models&#xff0c;簡稱LLM&#xff09;如GPT-4、Claude和LLaMA等近年來取得了突破性進展&#xff0c;能夠生成流暢自然的文本、回答復雜問題、甚至編寫代碼。但這些模型究竟是如何理解人類語言的&#xff1f;它們如何表示和處…

【Java面試筆記:進階】19.Java并發包提供了哪些并發工具類?

Java 并發包(java.util.concurrent)提供了一系列強大的工具類,用于簡化多線程編程、提升并發性能并確保線程安全。 1. Java 并發包的核心內容 并發包概述:java.util.concurrent 包及其子包提供了豐富的并發工具類,用于簡化多線程編程。主要組成部分: 高級同步結構:如 C…

Matlab數字信號處理——小波閾值法去噪分析系統

&#x1f527; 系統簡介 本系統通過 MATLAB GUI 圖形界面&#xff0c;集成了 小波閾值去噪算法 的各個核心模塊&#xff0c;可以實現以下功能&#xff1a; 打開語音文件&#xff1a;支持常見音頻格式讀取&#xff1b; 模擬加噪&#xff1a;系統內置白噪聲模擬功能&#xff0…

EDI 如何與 ERP,CRM,WMS等系統集成

在數字化浪潮下&#xff0c;與制造供應鏈相關產業正加速向智能化供應鏈轉型。傳統人工處理訂單、庫存和物流的方式已難以滿足下單客戶對響應速度和數據準確性的嚴苛要求。EDI技術作為企業間數據交換的核心樞紐&#xff0c;其與ERP、CRM、WMS等業務系統的深度集成&#xff0c;成…

計算機組成原理-408考點-數的表示

常見題型&#xff1a;C語言中的有符號數和無符號數的表示。 【例】有如下C語言程序段: short si-32767&#xff1b;unsigned short usisi&#xff1b;執行上述兩條語句后&#xff0c;usi的值為___。short和unsigned short均使用16位二進制數表示。 【分析】考點&#xff1a;同…

企業級AI開發利器:Spring AI框架深度解析與實戰

企業級AI開發利器&#xff1a;Spring AI框架深度解析與實戰 一、前言&#xff1a;Java生態的AI新紀元 在人工智能技術爆發式發展的今天&#xff0c;Java開發者面臨著一個新的挑戰&#xff1a;如何將大語言模型&#xff08;LLMs&#xff09;和生成式AI&#xff08;GenAI&#…

【金倉數據庫征文】——選擇金倉,選擇勝利

目錄 第一部分&#xff1a;金倉數據庫——開創數據庫技術的新時代 1.1 金倉數據庫的技術底蘊 1.2 高可用架構與災備能力 1.3 分布式架構與彈性擴展能力 第二部分&#xff1a;金倉數據庫助力行業數字化轉型 2.1 電信行業&#xff1a;核心系統國產化替代 2.2 醫療行業&…

用C語言實現——一個中綴表達式的計算器。支持用戶輸入和動畫演示過程。

一、思路概要和知識回顧 1.思路概要 ①中綴表達式計算&#xff1a; 需要處理運算符的優先級&#xff0c;可能需要用到棧結構。 ??如何將中綴表達式轉換為后綴表達式&#xff1f;或者直接計算&#xff1f; 通常&#xff0c;中綴轉后綴&#xff08;逆波蘭式&#xff09;再…

Langchain_Agent+數據庫

本處使用Agent數據庫&#xff0c;可以直接執行SQL語句。可以多次循環查詢問題 前文通過chain去聯系數據庫并進行操作&#xff1b; 通過鏈的不斷內嵌組合&#xff0c;生成SQL在執行SQL再返回。 初始化 import os from operator import itemgetterimport bs4 from langchain.ch…

Python 爬蟲如何偽裝 Referer?從隨機生成到動態匹配

一、Referer 的作用與重要性 Referer 是 HTTP 請求頭中的一個字段&#xff0c;用于標識請求的來源頁面。它在網站的正常運行中扮演著重要角色&#xff0c;例如用于統計流量來源、防止惡意鏈接等。然而&#xff0c;對于爬蟲來說&#xff0c;Referer 也可能成為被識別為爬蟲的關…

Post-Processing PropertySource instance詳解 和 BeanFactoryPostProcessor詳解

PropertySourcesBeanFactoryPostProcessor詳解 1. 核心概念 BeanFactoryPostProcessor 是 Spring 框架中用于在 BeanFactory 初始化階段 對 Environment 中的 PropertySource 進行后處理的接口。它允許開發者在 Bean 創建之前 對屬性源進行動態修改&#xff0c;例如添加、刪除…

[C]基礎13.深入理解指針(5)

博客主頁&#xff1a;向不悔本篇專欄&#xff1a;[C]您的支持&#xff0c;是我的創作動力。 文章目錄 0、總結1、sizeof和strlen的對比1.1 sizeof1.2 strlen1.3 sizeof和strlen的對比 2、數組和指針筆試題解析2.1 一維數組2.2 字符數組2.2.1 代碼12.2.2 代碼22.2.3 代碼32.2.4 …

賽靈思 XCKU115-2FLVB2104I Xilinx Kintex UltraScale FPGA

XCKU115-2FLVB2104I 是 AMD Xilinx Kintex UltraScale FPGA&#xff0c;基于 20 nm 先進工藝&#xff0c;提供高達 1 451 100 個邏輯單元&#xff08;Logic Cells&#xff09;&#xff0c;77 721 600 bit 的片上 RAM 資源&#xff0c;以及 5 520 個 DSP 切片&#xff08;DSP48E…