使用React組件編寫溫度顯示器
更新時(shí)間：2022年08月26日 14:34:32 作者：攻城獅plus
這篇文章主要為大家詳細(xì)介紹了使用React組件編寫溫度顯示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了React組件編寫溫度顯示器的具體代碼，供大家參考，具體內(nèi)容如下
這是模擬了一下溫度顯示器的效果，先看效果：
先在頁面中引入React等；
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; // 頁面的樣式文件
開發(fā)過程是這樣的：
首先定義一個(gè)BoillingVerdict組件，用來顯示溫度顯示器的（樣式先不寫，在后面一起上代碼）(溫度顯示器上的數(shù)字不是溫度；)，
// 顯示溫度計(jì)算器文字的函數(shù)組件(最高300攝氏度)
function BoillingVerdict(props) {
? return (
? ? <div className="outer">
? ? ? <div className="inner" style={{ height: props.height + "%", background: props.bg, }} >
? ? ? ? {props.height}
? ? ? </div>
? ? </div>
? );
}然后，創(chuàng)建一個(gè)名為 Calculator 的組件，用于渲染 '控制溫度的輸入框' 和 溫度顯示器組件，
class Calculator extends React.Component {
? // 構(gòu)造函數(shù)，可以用于初始化state
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? temperature: 0, // 溫度
? ? ? tempHeight: 0, // 溫度顯示器背景色高度
? ? ? bg: "#fff", // 溫度顯示器顏色
? ? };
? ? // 為tempChange方法綁定this,否則該方法中拿不到this
? ? this.tempChange = this.tempChange.bind(this);
? }
? tempChange(e) {?
? ?// 判斷溫度值大小來設(shè)置顏色
? ? var colors =
? ? ? Number(e.target.value) > 90 ? "#0F1CED" : Number(e.target.value) > 80 ? "#D5D70B" :
? ? ? Number(e.target.value) > 70 ? "#0BD737" : Number(e.target.value) > 60 ? "#0BD7CA" :
? ? ? Number(e.target.value) > 50 ? "#ED194B" : Number(e.target.value) > 40 ? "#AE1FD2" :
? ? ? Number(e.target.value) > 30 ? "skyblue" : Number(e.target.value) > 20 ? "blue" :
? ? ? Number(e.target.value) > 10 ? "orange" : "#671552";
? ? var height = (Number(e.target.value) / 3).toFixed(2);
? ? this.setState({
? ? ? temperature: e.target.value,
? ? ? tempHeight: height,
? ? ? bg: colors,
? ? });
? }
? render() {
? ? return (
? ? ? <fieldset>
? ? ? ? <legend> 溫度： </legend>
? ? ? ? <input value={this.state.temperature} onChange={this.tempChange} type="number" > </input>
? ? ? ? <BoillingVerdict height={this.state.tempHeight} bg={this.state.bg}></BoillingVerdict>
? ? ? </fieldset>
? ? );
? }
}然后渲染：
ReactDOM.render(<Calculator></Calculator>,document.getElementById("root12"));index.css
.outer{
? width:80px;
? height:300px;
? border:1px solid black;
? border-radius: 20px;
? overflow: hidden;
? background:#fff;
? margin-top:10px;
? position:relative;
? text-align: center;
}
.inner{
? position:absolute;
? bottom:0;height:200px;
? background:#fff;
? width:100%;
? background:blue;
? text-align: center;
? transition: all 1s;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react?路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權(quán)限動(dòng)態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了React手寫一個(gè)手風(fēng)琴組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React styled components樣式組件化使用流程
styled-components 是react的一個(gè)第三方庫，一種css私有化的方式。用來實(shí)現(xiàn)CSS in JS 的方式之一。在多人協(xié)作中，css必定會(huì)出現(xiàn)命名沖突，與vue的scoped解決方案不同，react用styled-components的給類名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化2023-02-02
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)
這篇文章主要為大家介紹了redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了React中的useState如何改變值不重新渲染的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react-native中路由頁面的跳轉(zhuǎn)與傳參的實(shí)例詳解
這篇文章主要介紹了react-native中路由頁面的跳轉(zhuǎn)與傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來學(xué)習(xí)吧2023-04-04