本教程探討如何在react組件中動(dòng)態(tài)地將一個(gè)屬性的值用于另一個(gè)屬性，特別是當(dāng)該值需要實(shí)時(shí)更新時(shí)。我們將通過一個(gè)`circularprogressbar`組件的示例，詳細(xì)講解如何利用react的`usestate` hook管理組件內(nèi)部狀態(tài)，從而實(shí)現(xiàn)屬性間的聯(lián)動(dòng)與ui的響應(yīng)式更新，并強(qiáng)調(diào)受控組件的設(shè)計(jì)模式。

在React開發(fā)中，我們經(jīng)常遇到需要將組件的某個(gè)屬性值（例如進(jìn)度條的value）同時(shí)顯示在組件的另一個(gè)部分（例如進(jìn)度條內(nèi)部的text）的場景。初學(xué)者可能會(huì)嘗試直接引用組件內(nèi)部的屬性，例如 text={CircularProgressbar.value}，但這種方式在React中是無效的，因?yàn)樗环蟁eact組件的聲明式和響應(yīng)式編程范式。要實(shí)現(xiàn)這種動(dòng)態(tài)聯(lián)動(dòng)，核心在于利用React的狀態(tài)管理機(jī)制。

理解React中的狀態(tài)（State）

在React中，組件的UI是其狀態(tài)的函數(shù)。當(dāng)組件的某個(gè)數(shù)據(jù)需要隨著時(shí)間改變并影響UI時(shí)，我們應(yīng)該將其作為組件的狀態(tài)進(jìn)行管理。React提供了useState Hook，允許函數(shù)組件擁有自己的狀態(tài)。

當(dāng)一個(gè)值（例如進(jìn)度條的當(dāng)前進(jìn)度）既要作為組件的輸入（value屬性），又要作為組件的輸出或顯示內(nèi)容（text屬性）時(shí)，最有效的方法是讓這個(gè)值成為組件自身的狀態(tài)。這樣，當(dāng)狀態(tài)更新時(shí)，React會(huì)自動(dòng)重新渲染組件，確保所有引用該狀態(tài)的地方都得到同步更新。

實(shí)現(xiàn)動(dòng)態(tài)屬性值聯(lián)動(dòng)的步驟

1. 聲明狀態(tài)變量： 使用useState Hook在組件內(nèi)部聲明一個(gè)狀態(tài)變量來存儲(chǔ)需要?jiǎng)討B(tài)管理的值。
2. 綁定狀態(tài)到屬性： 將這個(gè)狀態(tài)變量綁定到需要使用它的所有組件屬性上。
3. 提供更新機(jī)制： 如果該值是可變的（例如用戶交互導(dǎo)致進(jìn)度條變化），需要提供一個(gè)機(jī)制來更新這個(gè)狀態(tài)。對(duì)于受控組件，這通常通過一個(gè)回調(diào)函數(shù)（如onChange）來實(shí)現(xiàn)。

示例：CircularProgressbar的動(dòng)態(tài)進(jìn)度顯示

讓我們以一個(gè)CircularProgressbar組件為例，演示如何將進(jìn)度值動(dòng)態(tài)地顯示在其value屬性和text屬性中。

import React, { useState } from 'react';
// 假設(shè) CircularProgressbar 是一個(gè)第三方庫或自定義組件
// import { CircularProgressbar } from 'react-circular-progressbar';
// import 'react-circular-progressbar/dist/styles.css';

// 模擬一個(gè) CircularProgressbar 組件，以便代碼能夠運(yùn)行
// 實(shí)際開發(fā)中請(qǐng)使用您項(xiàng)目中的 CircularProgressbar 組件
const CircularProgressbar = ({ value, text, onChange }) => {
  return (
    <div style={{ width: 100, height: 100, border: '1px solid #ccc', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', borderRadius: '50%', background: `conic-gradient(#007bff ${value}%, #eee ${value}%)` }}></div>
      <span style={{ zIndex: 1, fontWeight: 'bold' }}>{text}%</span>
      {/* 模擬一個(gè)輸入，用于演示 onChange */}
      <input
        type="range"
        min="0"
        max="100"
        value={value}
        onChange={(e) => onChange && onChange(Number(e.target.value))}
        style={{ position: 'absolute', bottom: -30, width: '100%' }}
      />
    </div>
  );
};


const Featured = () => {
  // 1. 聲明狀態(tài)變量 'progress'，初始值為0
  const [progress, setProgress] = useState(0);

  // 2. 定義一個(gè)處理進(jìn)度變化的函數(shù)
  const handleProgressChange = (newProgress) => {
    setProgress(newProgress); // 更新狀態(tài)
  };

  return (
    <div className="featured">
      <div className="top">
        <h1 className="title">Total Revenue</h1>
        {/* 假設(shè) MoreVertIcon 是一個(gè)圖標(biāo)組件 */}
        {/* <MoreVertIcon fontSize="small" /> */}
      </div>
      <div className="bottom">
        <div className="featuredChart">
          {/* 3. 將 'progress' 狀態(tài)綁定到 'value' 和 'text' 屬性 */}
          {/* 4. 將 handleProgressChange 綁定到組件的 onChange 屬性 */}
          <CircularProgressbar
            value={progress}
            text={progress} // 直接使用狀態(tài)變量作為文本內(nèi)容
            onChange={handleProgressChange} // 當(dāng)組件內(nèi)部值變化時(shí)，更新狀態(tài)
          />
        </div>
        <p>當(dāng)前進(jìn)度: {progress}%</p>
      </div>
    </div>
  );
};

export default Featured;

在上面的代碼中：

乾坤圈新媒體矩陣管家

新媒體賬號(hào)、門店矩陣智能管理系統(tǒng)

17

查看詳情

• 我們使用 const [progress, setProgress] = useState(0); 初始化了一個(gè)名為 progress 的狀態(tài)變量，其初始值為 0。setProgress 是一個(gè)函數(shù)，用于更新 progress 的值。
• CircularProgressbar 組件的 value 屬性和 text 屬性都直接綁定到了 progress 狀態(tài)變量。
• CircularProgressbar 組件的 onChange 屬性被設(shè)置為 handleProgressChange 函數(shù)。當(dāng)組件內(nèi)部（例如通過用戶交互）觸發(fā)值變化時(shí)，handleProgressChange 會(huì)被調(diào)用，并傳入新的進(jìn)度值，然后 setProgress 會(huì)更新 progress 狀態(tài)。
• 當(dāng) progress 狀態(tài)更新時(shí)，React 會(huì)重新渲染 Featured 組件，CircularProgressbar 的 value 和 text 屬性都會(huì)自動(dòng)反映最新的 progress 值。

關(guān)鍵概念：受控組件與非受控組件

這個(gè)例子也很好地說明了受控組件（Controlled Components）的概念。

• 受控組件：組件的表單數(shù)據(jù)由React狀態(tài)管理。開發(fā)者通過value prop將數(shù)據(jù)傳遞給組件，并通過onChange等事件處理器來更新狀態(tài)。這意味著組件的渲染完全由React狀態(tài)控制，其值始終與狀態(tài)保持同步。我們上面的CircularProgressbar就是一個(gè)受控組件的例子。
• 非受控組件：組件的表單數(shù)據(jù)由DOM自身管理。開發(fā)者可以使用ref來獲取DOM元素，并直接訪問其值。非受控組件通常更簡單，但在需要復(fù)雜交互或數(shù)據(jù)驗(yàn)證時(shí)可能不如受控組件靈活。

在大多數(shù)需要?jiǎng)討B(tài)交互和數(shù)據(jù)同步的場景中，推薦使用受控組件模式，因?yàn)樗芴峁└深A(yù)測的數(shù)據(jù)流和更強(qiáng)大的控制能力。

注意事項(xiàng)

• 組件API： 確保你了解你正在使用的組件（如CircularProgressbar）提供了哪些props來接收值和處理變化。value和onChange是常見模式，但具體名稱可能因組件庫而異。
• 類型匹配： 確保你傳遞給屬性的值類型與組件期望的類型相匹配。例如，value可能期望數(shù)字，而text可能期望字符串或數(shù)字。在我們的例子中，progress是數(shù)字，可以直接用于text屬性，因?yàn)樗鼤?huì)被隱式轉(zhuǎn)換為字符串。
• 性能優(yōu)化： 對(duì)于頻繁更新的狀態(tài)，可以考慮使用useCallback或React.memo來優(yōu)化組件的渲染性能，避免不必要的重新渲染。

總結(jié)

在React中，要實(shí)現(xiàn)一個(gè)屬性的值動(dòng)態(tài)地影響另一個(gè)屬性，或者將一個(gè)動(dòng)態(tài)值顯示在UI的不同位置，最核心且推薦的做法是利用React的狀態(tài)管理。通過將這個(gè)動(dòng)態(tài)值存儲(chǔ)在組件的狀態(tài)中，并將其綁定到所有相關(guān)的屬性上，我們可以確保UI的各個(gè)部分始終與最新的數(shù)據(jù)保持同步。這種模式不僅使代碼更易于理解和維護(hù)，也充分利用了React的響應(yīng)式特性，構(gòu)建出健壯且交互性強(qiáng)的用戶界面。

以上就是React組件中動(dòng)態(tài)引用屬性值與狀態(tài)管理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！