初學者指南 React Props [帶語法]

React 是一個 MIT 許可的開源 JavaScript 庫，用於為應用程序設計交互式 UI。 它是一個基於組件的聲明式、靈活且高效的庫，使開發人員的生活更輕鬆。 由於它是一個基於組件的庫，因此它將 UI 分為幾個單獨的部分，稱為組件。 這些組件需要相互通信才能正常運行，這就是 React 道具出現的時候。

什麼是 React 道具？

“Props”這個詞是 React 庫中的一個關鍵字，意思是屬性。 它們有時也被稱為 React 組件中的全局變量或對象。 React props 類似於 HTML 中的參數。 關於 React props 的一些值得注意的事情是它們總是單向流動，並且其中的數據是只讀的。 這使得它們不可變，這意味著從一個組件流出的數據不能在另一個組件中更改。 我們可以通過一個純函數和不純函數的例子來理解這一點。

這是一個純函數，因為它總是為相同的輸入提供相同的輸出：

功能產品（a，b）{

返回 a * b;

}

這是一個不純的函數，因為它正在操縱自己的輸入：

函數存款（賬戶，金額）{

account.total += 金額；

}

由於 React props 是不可變的，因此組件需要作為純函數運行。 這是靈活的 React 庫中唯一的嚴格規則。

傳遞和訪問 React Props 的語法

如前所述，React props 類似於 HTML 參數，因此要向組件傳遞或添加任何 props，我們可以像傳遞 HTML 屬性一樣進行操作。

句法：

<component_name props_name = “價值” />

在上面的語法中，' component_name'是我們需要傳遞 props 的組件的名稱， props_name是 props 的名稱， value是 props 的值。

我們可以從組件的類中訪問任何道具。

句法：

this.props .props_name;

在上面的語法中，this.props 是一個全局對象，用於訪問組件類中的任何 props， props_name是我們要訪問的 React props 的名稱。

閱讀： JavaScript 與 JQuery：JavaScript 和 JQuery 之間的區別

如何使用 React 道具？

在任何組件中使用不可變的 React props 數據有兩種不同的方式。 這兩種方法是通過在主文件中的 reactDom.render() 函數中添加 props 或在組件本身中添加數據作為默認 props。 以下是兩種方式使用 React 道具的方法：

使用 react.Dom.render() 函數中的 React Props

首先我們需要在組件文件中添加道具。

從“反應”導入反應； //導入反應庫

class Example extends React.component { /* example 是擴展 React 組件類屬性的組件名稱 */

使成為（） {

返回 （

<div>

<h2>{this.props. h2 中的firstProp }</h2>

<h3>{這個，道具。 h3 中的secondProp }</h3>

</div>

);

}

}

導出默認示例； //導出組件

現在我們需要通過主文件中的 reactDom.render() 函數為 props 添加值並從那裡訪問它。

從“反應”導入反應；

從“react-dom”導入 ReactDom；

從'./Example.jsx'導入示例；

ReactDom.render(<示例 firstProp = “這是第一個Prop ” secondProp = “這是第二個Prop ”/>，document.getElementById('example'));

導出默認示例；

結果：

這是h2中的firstProp

這是h3中的secondProp

在組件構造函數中使用帶有默認 Props 的 React Props

在組件文件中添加道具及其值。

從“反應”導入反應； //導入反應庫

class Example extends React.component { /* example 是擴展 React 組件類屬性的組件名稱 */

使成為（） {

返回 （

<div>

<h2>{this.props. 第一道具}</h2>

<h3>{這個，道具。 secondProp }</h3>

</div>

);

}

}

示例.deafultProps = {

firstProp : “這是firstProp ”,

secondProp ：“這是secondProp ”

}

導出默認示例； //導出組件

從主文件訪問 React 道具。

從“反應”導入反應；

從“react-dom”導入 ReactDom；

從'./Example.jsx'導入示例；

ReactDom.render(< Example />, document.getElementById('example'));

這個輸出將類似於 reactDom.render() 函數的使用，除了這次它是在默認道具的幫助下完成的。

查看： Vue vs React：Vue 和 React 之間的區別

如何將 React Props 從一個組件傳遞到另一個組件

React props 的主要用途是在 React 中的組件之間傳遞數據。 下面的例子將幫助我們理解數據是如何傳遞的。

從“反應”導入反應；

類水果擴展 React.Component {

使成為（） {

返回 <h4>我是 {this.props. 名稱} 在 h4</h4>

}

}

類問題擴展 React.Component {

使成為（） {

返回 （

<div>

<h3>你是哪種水果？ 在 h3</h3>

< Fruit name = “Mango” / > //創建道具並賦值

</div>

);

}

}

ReactDom.render(<Question />, document.getElementById('fruit'));

這將給出以下輸出：

你是哪種水果？ 在 h3

我是h4的芒果

一起使用狀態和道具

眾所周知，React 是一種動態語言，它的靈活性是它的獨特之處。 因此，在開發應用程序時，單獨使用 React props 是不夠的。 這個問題在國家的幫助下得到了解決。 狀態是用於管理數據的另一個 React 特性。 讓我們看看我們如何結合 React props 和 state 來使我們的應用程序更具交互性和動態性。

從“反應”導入反應；

類汽車擴展 React.Component {

構造函數（道具）{

超級（道具）；

這個.state = {

firstCar：“這是奔馳！ In h2”, //給狀態賦值

secondCar：“這是一輛寶馬！ In h3” //給狀態賦值

}

}

使成為（） {

返回 （

<div>

<FirstCar firstProp = {this.state.firstCar}/> //給props賦值

<SecondCar secondProp = {this.state.secondCar}/> //給props賦值

</div>

);

}

}

類 FirstCar 擴展 React.Component {

使成為（） {

返回 （

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

類 SecondCar 擴展 React.Component {

使成為（） {

返回 （

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

導出默認汽車；

現在，我們需要從主文件訪問數據。

從“反應”導入反應；

從 'react-dom' 導入 ReactDOM；

從'./Car.jsx'導入汽車；

ReactDOM.render(<Car />, document.getElementById('car'));

結果：

這是奔馳！ 在 h2

這是一輛寶馬！ 在 h3

另請閱讀： Node JS 和 React JS 之間的區別

總結一下

React props 和 React 中用於管理數據的狀態相結合，使其成為最有用的 JavaScript 庫之一。 那裡有大量的React 項目想法，只有開發人員才能賦予它們生命。 因此，對 ReactJS 開發人員的需求非常大，他們的工資也在增加。

如果幫助企業創建應用程序並從事大量 React 項目以獲得巨額收入的想法讓您興奮，那麼是時候採取行動了，以免為時已晚。 您可以參加upGrad提供的在線課程，學習有關 React 的所有知識，並成為一名全棧軟件開發人員。

如果您有興趣了解更多關於 React、全棧開發的信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發 PG 文憑，該文憑專為在職專業人士設計，提供 500 多個小時的嚴格培訓，9 個以上的項目，和任務、IIIT-B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。