ReactJS - testInstance.props 屬性

---

---

在網頁開發和建立使用者介面時，有一個名為 testInstance.props 的概念。可以將其視為網站上某個特定元素的一組指令。

Props 是 Web 應用中父元件傳送給子元件的訊息。假設我們在網站上有一個按鈕，並希望告訴它要小一些。在程式設計術語中，我們會說類似於 <Button size="small" />。在這種情況下，Size 是一個 prop，其值為 'small'。

當我們遇到 testInstance.props 時，就像我們在測試期間檢視傳送到網站某些部分的所有訊息或指令。例如，如果我們有一個 <Button size="small" /> 元件，則其 testInstance.props 將為 {size:'small'}。它主要由這些訊息或特徵組成。

語法

testInstance.props

引數

testInstance.props 不接受任何引數。

返回值

testInstance.props 屬性在測試期間返回與 Web 應用中特定元素相關聯的一組指令。

示例

示例 - 按鈕元件

這是一個名為 Button 的簡單 React 元件。它旨在建立一個具有可自定義屬性（如字型大小、背景顏色和標籤）的按鈕。該元件在測試期間記錄其屬性以進行除錯。如果未透過 props 提供特定的樣式或標籤，則使用預設值以確保按鈕在視覺上具有吸引力。因此，此應用程式的程式碼如下所示：

import React from 'react';

const Button = (props) => {
   const { fontSize, backgroundColor, label } = props;   
   console.log('Button Props:', props);   
   const buttonStyle = {
      fontSize: fontSize || '16px',
      backgroundColor: backgroundColor || 'blue',
      padding: '10px 15px',
      borderRadius: '5px',
      cursor: 'pointer',
      color: '#fff', // Text color
   };
   
   const buttonLabel = label || 'Click me';
   
   return (
      <button style={buttonStyle}>
      {buttonLabel}
      </button>
   );
};

export default Button;

輸出

示例 - 影像元件

在此示例中，App 元件使用一組影像 props（如 src、alt 和 width）呈現 Image 元件。我們可以用所需影像的實際 URL、替代文字和寬度替換佔位符值。Image 元件中的 console.log 語句將在測試期間記錄這些 props。因此，程式碼如下：

Image.js

import React from 'react';

const Image = (props) => {
   const { src, alt, width } = props;   
   console.log('Image Props:', props); // Log the props here   
   return <img src={src} alt={alt} style={{ width }} />;
};

export default Image;

App.js

import React from 'react';
import Image from './Image';

const App = () => {
   const imageProps = {
      src: 'https://www.example.com/picphoto.jpg', // Replace with the actual image URL
      alt: 'Sample Image',
      width: '300px',
   };
   
   return (
      <div>
         <h1>Image Component Example</h1>
         <Image {...imageProps} />
      </div>
   );
};

export default App;

輸出

示例 - 輸入元件

在此示例中，App 元件使用一組輸入 props（如 placeholder 和 maxLength）呈現 Input 元件。Input 元件中的 console.log 語句將在測試期間記錄這些 props。並且此元件的程式碼如下所示：

Input.js

import React from 'react';

const Input = (props) => {
   const { placeholder, maxLength } = props;
   
   console.log('Input Props:', props); // Log the props here
   
   return <input type="text" placeholder={placeholder} maxLength={maxLength} />;
};

export default Input;

App.js

import React from 'react';
import Input from './Input';

const App = () => {
   const inputProps = {
      placeholder: 'Enter your text',
      maxLength: 50, 
   };
   
   return (
      <div>
         <h1>Input Component Example</h1>
         <Input {...inputProps} />
      </div>
   );
};

export default App;

輸出

總結

testInstance.props 是一個屬性，允許開發人員在測試期間檢視和理解分配給網站上某些元素的屬性或指令。這就像檢視一張解釋 Web 應用的每個元件應如何工作的備忘單。透過理解此原理，開發人員可以確保其網站正常執行併為使用者提供出色的體驗。