react設定預設props

阿新 • • 發佈：2019-02-20

一般設定props的預設值有兩種方式，下面通過一個例子說明一下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React表單</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js" 
></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">

            class Greeting extends React.Component {

//方法一： 指定 props 的預設值， 這個方法只有瀏覽器編譯以後 才會生效 


                static defaultProps = { 
                    age: 18
                }

                render() {
                    return (
                    <h1>Hello, {this.props.name}. and  my age is {this.props.age}</h1>
                    );
                }
            }

// 方法二： 指定 props 的預設值，這個方法會一直生效

            Greeting.defaultProps = {    
                name: '我是props的預設值！'
            };

            ReactDOM.render(
                <Greeting 
 />,
                document.getElementById('example')
            );
    </script>
  </body>
</html>

第一種方式：

React 元件類中宣告 defaultProps 作為靜態屬性。

第二種方式：

通過賦值特定的 defaultProps 屬性為 props 定義預設值：

react設定預設props

一般設定props的預設值有兩種方式，下面通過一個例子說明一下。 <!DOCTYPE html> <html> <head> <meta ch

React + TypeScript 預設 Props 的處理

React 中的預設 Props 通過元件的 defaultProps 屬性可為其 Props 指定預設值。以下示例來自 React 官方文件 - Default Prop Values： class Greeting extends React.Component {

react es6 怎麼設定預設的 state和props的方法

1state在constructor方法裡寫 constructor(props) { this.state = { n: ... } } 2 寫default props有兩種方法 //1 在元件內部的使用static ... s

React Native的props使用詳解

static rip ng- ont nts -m https oot ner 普通傳參傳遞 export default class App extends Component<> { constructor() { super(

react 生命中期 props state區別生命周期

eat class ini destroy 安裝 ops art 渲染之前 npm安裝create-react-app npx create-react-app my-app cd my-app npm start 查看調試props驗證 babel-react-

Linux設定預設Python版本

1.檢視當前預設的Python版本開啟終端，輸入python 這裡寫圖片描述可以看到當前系統中預設的python版本是 2.7.12 2. 修改預設Python版本下面把預設的python版本從2.7改為3.5 進入”/usr/bin”目錄下，輸入”ls -l | grep pytho

使用react——解決this.props.history.push無法跳轉的問題

轉自： https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 場景：一個元件中，含有ul展開陣列的元件，在每一行中，都能點選相應的這一行，跳轉到對應的頁面。也就是說，元件套元件，子元件中this.props.history

React中constructor(props){}究竟是什麼

在React Class中設定state的初始值或者繫結事件時為什麼需要在 constructor(){} 中加上 super() 呢我們嘗試去掉 super() 看看編譯的結果： constructor() { this.state = {se

Android系統設定預設值大全

一、是否有預設值在尋找一個開關的預設值時，首先要明白一點，該開關是否存在預設值，以及該開關狀態是否有狀態儲存（一般狀態儲存在settings的db中）。判斷條件：在reboot（重啟）之後開關狀態仍舊儲存或者是在reset（恢復出廠設定）之後開關狀態恢復到預設的，才能找到預設值。

第二十三篇-ubuntu18.04怎麼下載播放器以及如何設定預設播放器

下載播放器安裝命令：sudo apt-get install smplayer再安裝解碼器：　　安裝win32codecs包　　如果是intel的CPU　　程式碼:　　sudo apt-get install w32codecs　　如果是64位 CPU　　程式碼:　　sudo apt-get instal

oracle新增欄位，並設定預設值

操作在plsql下，找到表名，右鍵 -> edit -> columns -> 填寫欄位資訊 -> view sql -> 複製sql -> 點選apply 報錯 ORA-00054: 資源正忙, 但指定以 NOWA

Devexpress MVC DateEdit 設定預設的Time

當用戶沒有選擇日期的時候, 預設顯示當前的時間給TimeEdit. 只有當用戶選了日期後, 才會把時間帶進去. 效果圖: 實現 C# Helper Code public static Action<DateE

PostgreSQL建立欄位設定預設值並且不鎖表

1建立測試表 drop table if exists test009; create table test009( objectid bigint not null, name text not null, --flag integer default(2) not null

Android鍵盤輸入語言設定預設開啟myanmar 緬甸語

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

unity--設定預設螢幕方向並支援自動旋轉

1.在Player Setting裡面設定預設的啟動螢幕正方向： 2.在控制類的Awake或者Start方法裡面，再設定想要的旋轉方向 1 2 3 4 5 6 7 8 9 void Awake() { //設定螢幕

@Value() 設定預設值後，配置值無法生效的一個解決方法。騷操作

遇到的現象：使用@Value（${cash.trade.show.loan.repay:true}）配置後，即使配置檔案裡配置了cash.trade.show.loan.repay = false ，程式獲得的showLoanRepay還是true。這邊原始碼

Word設定預設字型和版式，打造專屬辦公word模板

由於工作性質的原因，在使用Word排版或編寫文稿時，必須要使用特定的字型、格式、頁面版式等。在剛開始工作的時候，使用Word基本上就是預設字型，然後每次再花費時間去調格式，設定這些樣式可能比寫一篇文稿的時間還要長。　　那麼有沒有好的辦法，固定字型、固定格式、固定排版……打造專屬的辦公模板呢？省

select2如何設定預設空值

11.idea設定預設類註釋與方法註釋+修改程式碼提示快捷鍵

點選file會發現有兩個settings 一個是settings：區域性設定（當然有些如editor裡的genneral也是全域性設定）另一個是other settings：全域性設定，每建立新的專案都會引用其設定 1.檔案頭設定，根據自己喜好或者公司風格設定，${user}如果

Android MTK 8.1 設定預設輸入法

以實現訊飛輸入法為預設輸入法為例： 1.\vendor\mediatek\proprietary\packages\apps\SettingsProvider\res\values\defaults.xml 中宣告FlyIME輸入法  <

react設定預設props

第一種方式：

第二種方式：

相關推薦